"use client";

import { AlertTriangle, Info, XCircle } from "lucide-react";

import { Button } from "@/components/ui/button";

type BannerVariant = "info" | "warning" | "error";

const bannerStyles: Record<
  BannerVariant,
  { border: string; bg: string; icon: React.ReactNode; text: string }
> = {
  info: {
    border: "border-[#3370ff]",
    bg: "bg-[#eef4ff]",
    icon: <Info className="h-5 w-5 text-[#3370ff]" />,
    text: "text-[#1f2329]",
  },
  warning: {
    border: "border-[#ff7d00]",
    bg: "bg-[#fff7e8]",
    icon: <AlertTriangle className="h-5 w-5 text-[#ff7d00]" />,
    text: "text-[#1f2329]",
  },
  error: {
    border: "border-[#f53f3f]",
    bg: "bg-[#fff1f0]",
    icon: <XCircle className="h-5 w-5 text-[#f53f3f]" />,
    text: "text-[#1f2329]",
  },
};

export type FeedbackBannerProps = {
  variant?: BannerVariant;
  title: string;
  description?: string;
  actionLabel?: string;
  onAction?: () => void;
};

export function FeedbackBanner({
  variant = "info",
  title,
  description,
  actionLabel,
  onAction,
}: FeedbackBannerProps) {
  const styles = bannerStyles[variant];

  return (
    <div
      className={`flex items-start justify-between gap-4 rounded-lg border p-4 ${styles.border} ${styles.bg}`}
    >
      <div className="flex items-start gap-3">
        {styles.icon}
        <div>
          <p className={`text-sm font-medium ${styles.text}`}>{title}</p>
          {description ? (
            <p className="text-sm text-[#646a73]">{description}</p>
          ) : null}
        </div>
      </div>
      {actionLabel && onAction ? (
        <Button
          variant="ghost"
          className="h-8 px-2 text-[#1f2329] hover:bg-white/60"
          onClick={onAction}
        >
          {actionLabel}
        </Button>
      ) : null}
    </div>
  );
}