import * as React from "react";

import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "../../lib/utils";
import { CloseIcon, InfoIcon } from "@astraicons/react/linear";

const alertVariants = cva(
  "relative flex w-fit max-w-[23.75rem] rounded-3xl p-4 gap-x-4 backdrop-blur-xl bg-grayscale-surface",
  {
    variants: {
      variant: {
        default: "border-grayscale-border bg-default-gradient",
        info: "border-info-200 bg-info-gradient",
        warning: "border-warning-200 bg-warning-gradient",
        success: "border-success-200 bg-success-gradient",
        error: "border-error-200 bg-error-gradient",
      },
      borderAccent: {
        true: "border-b-2 border-l-2",
        false: "border",
      },
    },
    defaultVariants: {
      variant: "default",
      borderAccent: false,
    },
  }
);

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

const alertIconVariants = cva("rounded-xl p-3 w-fit h-fit", {
  variants: {
    variant: {
      default: "bg-grayscale-surface-bg2 border border-grayscale-border",
      info: "text-shape-white bg-info-surface border border-info-surface",
      warning:
        "text-shape-white bg-warning-surface border border-warning-surface",
      success:
        "text-shape-white bg-success-surface border border-success-surface",
      error: "text-shape-white bg-error-surface border border-error-surface",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

const AlertIcon = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertIconVariants>
>(({ variant, className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(alertIconVariants({ variant }), className)}
    {...props}
  >
    <InfoIcon className="size-6" />
  </div>
));
AlertIcon.displayName = "AlertIcon";

const alertTitleVariants = cva("text-lg font-medium leading-8 tracking-tight", {
  variants: {
    variant: {
      default: "text-grayscale-textIcon-title",
      info: "text-info-surface",
      warning: "text-warning-surface",
      success: "text-success-surface",
      error: "text-error-surface",
    },
  },
  defaultVariants: {
    variant: "default",
  },
});

//Wrapper for the main content of the alert
const AlertContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("flex flex-col", className)} {...props} />
));
AlertContent.displayName = "AlertContent";

//Alert title
const AlertTitle = React.forwardRef<
  HTMLHeadingElement,
  React.HTMLAttributes<HTMLHeadingElement> &
    VariantProps<typeof alertTitleVariants>
>(({ variant, className, ...props }, ref) => (
  <h5
    ref={ref}
    className={cn(alertTitleVariants({ variant }), className)}
    {...props}
  />
));
AlertTitle.displayName = "AlertTitle";

//Alert description
const AlertDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn(
      "text-sm text-grayscale-textIcon-body leading-[1.375rem]",
      className
    )}
    {...props}
  />
));
AlertDescription.displayName = "AlertDescription";

//Alert action buttons
const AlertAction = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    className={cn("mt-4 flex items-center gap-x-2", className)}
    ref={ref}
    {...props}
  />
));
AlertAction.displayName = "AlertAction";

//alert close button
const AlertCloseButton = React.forwardRef<
  HTMLButtonElement,
  React.HTMLAttributes<HTMLButtonElement>
>(({ className, ...props }, ref) => (
  <button
    type="button"
    className={cn("cursor-pointer order-last h-fit w-fit", className)}
    {...props}
    ref={ref}
  >
    <CloseIcon className="size-6 text-grayscale-textIcon-title" />
  </button>
));
AlertCloseButton.displayName = "AlertCloseButton";

export {
  Alert,
  AlertAction,
  AlertCloseButton,
  AlertContent,
  AlertDescription,
  AlertIcon,
  AlertTitle,
};
Components

Alert message goes here!
