import { AlertCircle, CheckCircle2, InfoIcon } from "lucide-react";
import { twMerge } from "tailwind-merge";

type AuthInfoBannerProps = {
  message: string;
  variant: "error" | "info" | "success";
};

const variantStyles: Record<AuthInfoBannerProps["variant"], string> = {
  error:
    "bg-red-50 text-red-800 border-red-200 dark:bg-red-950/20 dark:text-red-200 dark:border-red-800",
  info: "bg-blue-50 text-blue-800 border-blue-200 dark:bg-blue-950/20 dark:text-blue-200 dark:border-blue-800",
  success:
    "bg-green-50 text-green-800 border-green-200 dark:bg-green-950/20 dark:text-green-200 dark:border-green-800",
};

const variantIcon = {
  error: AlertCircle,
  info: InfoIcon,
  success: CheckCircle2,
} satisfies Record<AuthInfoBannerProps["variant"], typeof AlertCircle>;

export function AuthInfoBanner({ message, variant }: AuthInfoBannerProps) {
  const Icon = variantIcon[variant];

  return (
    <div className={twMerge("rounded-lg border p-4", variantStyles[variant])}>
      <div className="flex gap-3">
        <Icon className="mt-0.5 h-5 w-5 shrink-0" />
        <p className="text-sm">{message}</p>
      </div>
    </div>
  );
}
