"use client";

import { AlertCircle, CheckCircle2, Info, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export type InlineAlertType = "error" | "success" | "warning" | "info";

export interface InlineAlertProps {
  type: InlineAlertType;
  message: string;
  title?: string;
  onDismiss?: () => void;
  className?: string;
}

const tone: Record<InlineAlertType, string> = {
  error: "border-danger-border bg-danger-bg text-danger",
  success: "border-success-border bg-success-bg text-success",
  warning: "border-warning-border bg-warning-bg text-warning",
  info: "border-border bg-muted/60 text-foreground",
};

const icons: Record<InlineAlertType, typeof AlertCircle> = {
  error: AlertCircle,
  success: CheckCircle2,
  warning: AlertCircle,
  info: Info,
};

export function InlineAlert({ type, message, title, onDismiss, className }: InlineAlertProps) {
  const Icon = icons[type];
  return (
    <div
      role="alert"
      className={cn(
        "flex items-start gap-2.5 rounded-lg border px-3 py-2.5 text-[13px] leading-relaxed",
        tone[type],
        className
      )}
    >
      <Icon className="mt-0.5 h-4 w-4 shrink-0" />
      <div className="min-w-0 flex-1">
        {title && <p className="font-medium">{title}</p>}
        <p className={title ? "mt-0.5 opacity-90" : undefined}>{message}</p>
      </div>
      {onDismiss && (
        <Button
          type="button"
          size="sm"
          variant="ghost"
          className="h-7 w-7 shrink-0 p-0 opacity-70 hover:opacity-100"
          onClick={onDismiss}
          aria-label="關閉"
        >
          <X className="h-3.5 w-3.5" />
        </Button>
      )}
    </div>
  );
}