import { cn } from './utils';
import type { VariantProps } from 'class-variance-authority';
import { cva } from 'class-variance-authority';
import type { HTMLAttributes } from 'react';
import { forwardRef } from 'react';

const variants = cva('flex p-4 mb-4 text-s rounded-md', {
  defaultVariants: {
    color: 'default',
  },
  variants: {
    color: {
      danger: 'border-red-300 bg-red-50 p-4 text-sm text-red-800',
      default: 'border-blue-300 bg-blue-50 p-4 text-sm text-blue-800',
      success: 'border-green-300 bg-green-50 p-4 text-sm text-green-800',
      warning: 'border-yellow-300 bg-yellow-50 p-4 text-sm text-yellow-800',
    },
  },
});

export type AlertProps = HTMLAttributes<HTMLDivElement> &
  VariantProps<typeof variants> & { readonly description?: string; readonly title: string };

export const Alert = forwardRef<HTMLDivElement, AlertProps>(
  ({ className, color, description, title, ...props }, ref) => (
    <div className={cn(variants({ className, color }))} role="alert" {...props} ref={ref}>
      <svg
        className="mr-3 mt-[2px] inline h-4 w-4 flex-shrink-0"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        fill="currentColor"
        viewBox="0 0 20 20"
      >
        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
      </svg>
      <span className="sr-only">Info</span>
      <div>
        <span className="font-medium">{title}</span>
        {description && <div className="mt-1.5 list-inside list-disc">{description}</div>}
      </div>
    </div>
  )
);