'use client';

import { Card } from '@/components/ui/Card';

interface AlertProps {
  variant?: 'default' | 'destructive' | 'success' | 'warning' | 'info';
  className?: string;
  children: React.ReactNode;
}

export function Alert({
  variant = 'default',
  className = '',
  children,
}: AlertProps) {
  const getVariantClasses = () => {
    switch (variant) {
      case 'destructive':
        return 'outline-card-red';
      case 'success':
        return 'outline-card-green';
      case 'info':
        return 'outline-card-blue';
      case 'warning':
        return 'outline-card-yellow';
      case 'default':
      default:
        return 'outline-card-gray';
    }
  };

  return (
    <Card className={`${getVariantClasses()} ${className}`}>{children}</Card>
  );
}

export function AlertTitle({
  children,
  className = '',
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <h3 className={`text-sm font-semibold mb-2 ${className}`}>{children}</h3>
  );
}

export function AlertDescription({
  children,
  className = '',
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return <div className={`text-sm ${className}`}>{children}</div>;
}
