import type { HTMLAttributes, ReactNode } from "react";
import { AlertCircle, CheckCircle2, Info, TriangleAlert } from "lucide-react";

import {
  cn,
  statusNoteClass,
  type StatusNoteVariant,
} from "@/lib/ui/variants";

interface StatusNoteProps extends HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
  title?: string;
  variant?: StatusNoteVariant;
}

export function StatusNote({
  children,
  title,
  variant = "info",
  className,
  ...props
}: StatusNoteProps) {
  const Icon = iconForVariant(variant);
  return (
    <div className={statusNoteClass({ variant, className })} {...props}>
      <div className="flex gap-2">
        <Icon className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
        <div className="min-w-0">
          {title ? (
            <p className="font-medium leading-5 text-ink">{title}</p>
          ) : null}
          <div className={cn(title ? "mt-1" : "", "text-current")}>
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}

function iconForVariant(variant: StatusNoteVariant) {
  if (variant === "success") return CheckCircle2;
  if (variant === "warning") return TriangleAlert;
  if (variant === "danger") return AlertCircle;
  return Info;
}