import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";

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

const alertVariants = cva(
  "tw-figr-relative tw-figr-w-full tw-figr-font-secondary tw-figr-rounded-m tw-figr-border tw-figr-px-m tw-figr-py-s tw-figr-text-sm [&>svg+div]:tw-figr-translate-y-[-3px] [&>svg]:tw-figr-absolute [&>svg]:tw-figr-left-4 [&>svg]:tw-figr-top-4 [&>svg]:tw-figr-text-base-black [&>svg~*]:tw-figr-pl-7",
  {
    variants: {
      variant: {
        default:
          "tw-figr-bg-base-white tw-figr-text-base-black tw-figr-border-neutral-200",
        destructive:
          "tw-figr-bg-base-white tw-figr-border-error-100 tw-figr-text-error-100 dark:tw-figr-border-error [&>svg]:tw-figr-text-error-100"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);

const Alert = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
  <div
    ref={ref}
    role="alert"
    className={cn(alertVariants({ variant }), className)}
    {...props}
  />
));
Alert.displayName = "Alert";

const AlertTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn(
      "tw-figr-mb-xxs tw-figr-text-desktop-content-accent ",
      className
    )}
    {...props}
  />
));
AlertTitle.displayName = "AlertTitle";

const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "[&_p]:tw-figr-leading-relaxed tw-figr-text-desktop-caption-regular",
      className
    )}
    {...props}
  />
));
AlertDescription.displayName = "AlertDescription";

export { Alert, AlertTitle, AlertDescription };