import * as React from "react";
import { InfoIcon, TriangleAlertIcon } from "lucide-react";

import { cn } from "../lib/utils";

type InfoVariant = "default" | "warning";

const variantClassName: Record<
  InfoVariant,
  {
    readonly root: string;
    readonly icon: string;
  }
> = {
  default: {
    root: "border-border/70 bg-card/50 text-foreground",
    icon: "text-muted-foreground",
  },
  warning: {
    root: "border-border/70 border-l-amber-500 bg-card text-foreground shadow-xs dark:border-border/70 dark:border-l-amber-400 dark:bg-card/70",
    icon: "text-amber-600 dark:text-amber-400",
  },
};

function Info({
  className,
  variant = "default",
  children,
  ...props
}: React.ComponentProps<"section"> & {
  readonly variant?: InfoVariant;
}) {
  const Icon = variant === "warning" ? TriangleAlertIcon : InfoIcon;
  const variantClass = variantClassName[variant];
  return (
    <section
      data-slot="info"
      className={cn(
        "grid grid-cols-[auto_1fr] gap-x-2.5 gap-y-1 rounded-md border px-3 py-2.5 text-sm",
        variant === "warning" ? "border-l-[3px]" : null,
        variantClass.root,
        className,
      )}
      {...props}
    >
      <Icon className={cn("mt-0.5 size-4", variantClass.icon)} aria-hidden />
      <div className="min-w-0 space-y-1.5">{children}</div>
    </section>
  );
}

function InfoTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="info-title"
      className={cn("text-[13px] font-medium leading-5 text-current", className)}
      {...props}
    />
  );
}

function InfoDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="info-description"
      className={cn("text-[12px] leading-5 text-muted-foreground", className)}
      {...props}
    />
  );
}

export { Info, InfoTitle, InfoDescription };