aragrp/components/logo.tsx

import { cn } from "@/lib/utils";
import Image from "next/image";
import Link from "next/link";

const variants = {
  mark: {
    src: "/assets/logo/mainLogo.png",
    width: 48,
    height: 48,
    className: "h-9 w-auto md:h-10",
  },
  text: {
    src: "/assets/logo/mainLogoText.png",
    width: 180,
    height: 48,
    className: "h-9 w-auto md:h-10",
  },
} as const;

export type LogoVariant = keyof typeof variants;

export const Logo = ({
  className,
  variant = "mark",
  priority = false,
  uniColor = false,
}: {
  className?: string;
  variant?: LogoVariant;
  priority?: boolean;
  /** Soft shadow so white wordmark stays readable on light surfaces (keeps brand teal). */
  uniColor?: boolean;
  hasCaption?: boolean;
}) => {
  const logo = variants[variant];

  return (
    <Link
      href="/"
      aria-label="امین رایان اسپادان"
      className={cn(
        "inline-flex items-center transition-opacity hover:opacity-80",
        className
      )}
    >
      <Image
        src={logo.src}
        alt="امین رایان اسپادان"
        width={logo.width}
        height={logo.height}
        priority={priority}
        className={cn(
          logo.className,
          uniColor &&
            "drop-shadow-[0_0_1px_rgba(0,0,0,0.85)] drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)] dark:drop-shadow-none",
        )}
      />
    </Link>
  );
};