﻿import React from 'react';

interface AlertProps {
    type?: 'info' | 'danger' | 'warning' | 'success';
    title: string;
    message: string;
    className?: string;
}

export function Alert({ type = 'info', title, message, className = '' }: AlertProps) {
    const styles = {
        info: 'bg-[#E3EBE8]/50 border-gray-200 text-[#3D4E4B]',
        danger: 'bg-red-50 border-red-100 text-red-700',
        warning: 'bg-amber-50 border-amber-100 text-amber-800',
        success: 'bg-teal-50 border-teal-100 text-teal-800'
    };

    const icons = {
        info: <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>,
        danger: <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>,
        warning: <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>,
        success: <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
    };

    return (
        <div className={`p-4 rounded-2xl border flex gap-4 items-start anim-fade font-sans ${styles[type]} ${className}`}>
            <div className={`shrink-0 mt-0.5 ${type === 'info' ? 'text-[#D4A017]' : ''}`}>{icons[type]}</div>
            <div>
                <h4 className="text-sm font-bold tracking-tight leading-tight">{title}</h4>
                <p className="text-xs font-semibold mt-1 leading-relaxed opacity-70 tracking-tight">{message}</p>
            </div>
        </div>
    );
}
