"use client";

import { AlertCircle, X } from "lucide-react";
import Link from "next/link";

interface Props {
  title: string;
  message: string;
  ctaLabel: string;
  ctaHref: string;
  dismissLabel: string;
  onClose: () => void;
}

/** Inline, dismissible amber warning row — icon + bold text + close, all center-aligned. */
export function WarningToast({ title, message, ctaLabel, ctaHref, dismissLabel, onClose }: Props) {
  return (
    <div
      role="alert"
      className="flex items-center gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-amber-800 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-300"
    >
      <AlertCircle aria-hidden className="h-5 w-5 shrink-0 text-amber-600 dark:text-amber-400" />
      <p className="flex-1 text-sm leading-none">
        <span className="font-bold">{title}</span>{" "}
        <span className="opacity-90">{message}</span>{" "}
        <Link href={ctaHref} className="font-semibold underline underline-offset-2 hover:no-underline">
          {ctaLabel}
        </Link>
      </p>
      <button
        type="button"
        onClick={onClose}
        aria-label={dismissLabel}
        className="shrink-0 rounded-full p-1 text-amber-600 transition hover:bg-amber-100 dark:text-amber-400 dark:hover:bg-amber-500/20"
      >
        <X className="h-4 w-4" />
      </button>
    </div>
  );
}