Alert

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

<Alert>
  This is a default info alert with important information.
</Alert>

<Alert variant="info">
  This is an informational alert with helpful details.
</Alert>

<Alert variant="success" title="Success!">
  Your changes have been saved successfully.
</Alert>

<Alert variant="warning" title="Warning">
  Please review your information before proceeding.
</Alert>

<Alert variant="error" title="Error">
  Something went wrong. Please try again.
</Alert>

<Alert variant="info" size="sm">
  Small alert message with compact spacing.
</Alert>

<Alert variant="success" size="md">
  Medium alert message with default spacing.
</Alert>

<Alert variant="warning" size="lg">
  Large alert message with generous spacing.
</Alert>

<Alert variant="info" title="Information">
  This is an informational alert with helpful details.
</Alert>

import { CheckCircle } from 'lucide-react';

// Default icon (automatic based on variant)
<Alert variant="info" icon={true}>
  Alert with default icon
</Alert>

// Custom icon
<Alert variant="success" icon={<CheckCircle />}>
  Alert with custom icon
</Alert>

// No icon
<Alert variant="warning" icon={false}>
  Alert without icon
</Alert>

<Alert
  variant="warning"
  title="Dismissible Alert"
  dismissible
  onDismiss={() => console.log('Alert dismissed!')}
>
  This alert can be dismissed by clicking the X button.
</Alert>

const [alerts, setAlerts] = useState([
  { id: 1, variant: 'info', message: 'Welcome to the dashboard!' },
  { id: 2, variant: 'success', message: 'Profile updated successfully' },
]);

const removeAlert = (id) => {
  setAlerts(alerts.filter((alert) => alert.id !== id));
};

return (
  <div className="space-y-4">
    {alerts.map((alert) => (
      <Alert
        key={alert.id}
        variant={alert.variant}
        dismissible
        onDismiss={() => removeAlert(alert.id)}
      >
        {alert.message}
      </Alert>
    ))}
  </div>
);

<Alert
  variant="info"
  title="Detailed Information"
  dismissible
>
  This is a longer alert message that demonstrates how the component handles 
  multiple lines of text. The alert should expand to accommodate the content 
  while maintaining proper spacing and readability. You can include detailed 
  information, instructions, or context to help users understand important 
  system messages or updates that require their attention.
</Alert>

<div className="space-y-4">
  <Alert variant="info" title="Information">
    This is an informational alert with helpful details.
  </Alert>
  
  <Alert variant="success" title="Success" dismissible>
    Operation completed successfully! You can dismiss this.
  </Alert>
  
  <Alert variant="warning" title="Warning">
    Please be careful with this action.
  </Alert>
  
  <Alert variant="error" title="Error" dismissible>
    An error occurred. Please check your input and try again.
  </Alert>
</div>

<Alert variant="error" title="Validation Failed">
  Please correct the following errors:
  <ul className="mt-2 list-disc list-inside">
    <li>Email address is required</li>
    <li>Password must be at least 8 characters</li>
    <li>Terms and conditions must be accepted</li>
  </ul>
</Alert>

<div className="space-y-3">
  <Alert variant="info" size="sm" dismissible>
    New updates available. Click to refresh.
  </Alert>
  
  <Alert variant="success" size="sm" dismissible>
    File uploaded successfully.
  </Alert>
  
  <Alert variant="warning" size="sm">
    Your session will expire in 5 minutes.
  </Alert>
</div>