import Image from "next/image";
import mbhsLogo from "@/public/images/mbhs-logo.png";

interface LogoProps {
  variant?: "vertical" | "horizontal";
  showTagline?: boolean;
  tagline?: string;
  size?: "sm" | "md" | "lg";
}

export default function Logo({
  variant = "vertical",
  showTagline = true,
  tagline = "Sign in to your account",
  size = "md",
}: LogoProps) {
  const sizeMap = {
    sm: 40,
    md: 48,
    lg: 64,
  };

  const textClasses = {
    sm: "text-xl",
    md: "text-2xl",
    lg: "text-3xl",
  };

  const iconSize = sizeMap[size];
  const textClass = textClasses[size];

  if (variant === "horizontal") {
    return (
      <div className="flex items-center gap-3">
        <Image
          src={mbhsLogo}
          alt="MBHS"
          width={iconSize}
          height={iconSize}
          className="rounded-lg"
        />
        <span className={`${textClass} font-bold text-gray-900 dark:text-white`}>MBHS</span>
      </div>
    );
  }

  return (
    <div className="flex flex-col items-center gap-2">
      <Image
        src={mbhsLogo}
        alt="MBHS"
        width={iconSize}
        height={iconSize}
        className="rounded-xl"
      />
      <h1 className={`${textClass} font-bold text-foreground`}>MBHS</h1>
      {showTagline && (
        <p className="text-gray-500 dark:text-gray-400 text-sm">{tagline}</p>
      )}
    </div>
  );
}