import { Info, Lightbulb, TriangleAlert } from 'lucide-react';
import { cn } from '@/lib/utils';
import type { DocCalloutVariant } from '@/docs/types';

type Props = {
    variant: DocCalloutVariant;
    title?: string;
    children: React.ReactNode;
};

const variantStyles: Record<
    DocCalloutVariant,
    { border: string; bg: string; icon: typeof Info }
> = {
    note: {
        border: 'border-blue-500/50',
        bg: 'bg-blue-500/5',
        icon: Info,
    },
    tip: {
        border: 'border-emerald-500/50',
        bg: 'bg-emerald-500/5',
        icon: Lightbulb,
    },
    warning: {
        border: 'border-amber-500/50',
        bg: 'bg-amber-500/5',
        icon: TriangleAlert,
    },
};

export function DocsCallout({ variant, title, children }: Props) {
    const styles = variantStyles[variant];
    const Icon = styles.icon;

    return (
        <div
            className={cn(
                'my-4 rounded-lg border-l-4 px-4 py-3',
                styles.border,
                styles.bg,
            )}
        >
            <div className="flex gap-3">
                <Icon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
                <div className="min-w-0 space-y-1">
                    {title ? (
                        <p className="text-sm font-medium text-foreground">
                            {title}
                        </p>
                    ) : null}
                    <div className="text-sm leading-relaxed text-muted-foreground">
                        {children}
                    </div>
                </div>
            </div>
        </div>
    );
}