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

import { classNames } from '../../lib/utils';

const calloutVariants = cva('rounded-lg border p-4', {
  variants: {
    tone: {
      info: 'border-blue-500/20 bg-blue-500/5',
      success: 'border-emerald-500/20 bg-emerald-500/5',
      warning: 'border-amber-500/20 bg-amber-500/5',
      danger: 'border-red-500/20 bg-red-500/5',
      brand: 'border-brand/20 bg-brand/5',
    },
  },
  defaultVariants: {
    tone: 'info',
  },
});

/** Props for {@link Callout}. */
type CalloutProps = React.HTMLAttributes<HTMLDivElement> &
  VariantProps<typeof calloutVariants>;

/**
 * A tinted box for a note that belongs to the page rather than to a toast:
 * how something works, a limit, a result, a warning.
 */
const Callout = React.forwardRef<HTMLDivElement, CalloutProps>(function Callout(
  { tone, className, ...props },
  ref
): JSX.Element {
  return (
    <div
      className={classNames(calloutVariants({ tone }), className)}
      {...props}
      ref={ref}
    />
  );
});

/** Props for {@link ErrorCallout}. */
interface ErrorCalloutProps {
  message: string;
  className?: string;
}

/**
 * One error, with its icon, the way every form on the platform reports one.
 */
function ErrorCallout({ message, className }: ErrorCalloutProps): JSX.Element {
  return (
    <Callout
      tone="danger"
      className={classNames('flex items-start gap-3', className)}
    >
      <AlertCircle className="mt-0.5 h-4 w-4 shrink-0 text-red-600" />
      <p className="text-sm text-foreground">{message}</p>
    </Callout>
  );
}

export { Callout, ErrorCallout, calloutVariants };