import type { LucideIcon } from 'lucide-react';

type FeatureCardProps = {
    icon: LucideIcon;
    title: string;
    description: string;
    highlighted?: boolean;
};

export default function FeatureCard({
    icon: Icon,
    title,
    description,
    highlighted = false,
}: FeatureCardProps) {
    return (
        <div
            className={
                highlighted
                    ? 'group flex gap-3 rounded-lg border border-primary/35 bg-primary/10 p-3.5'
                    : 'group flex gap-3 rounded-lg border bg-card p-3.5'
            }
        >
            <div className="flex size-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
                <Icon className="size-5" />
            </div>
            <div className="min-w-0">
                <p className="font-semibold leading-snug">{title}</p>
                <p className="mt-0.5 text-sm leading-relaxed text-muted-foreground">
                    {description}
                </p>
            </div>
        </div>
    );
}