import type { ReactNode } from 'react';
import Icon from '@/components/site/icon';
import { cn } from '@/lib/utils';

type EyebrowProps = {
    icon?: string;
    className?: string;
    children: ReactNode;
};

/** Small monospace label that sits above a heading. */
export default function Eyebrow({ icon, className, children }: EyebrowProps) {
    return (
        <div
            className={cn(
                'text-primary flex items-center gap-2 font-mono text-xs font-semibold tracking-wider uppercase',
                className,
            )}
        >
            {icon ? (
                <Icon name={icon} className="text-base" />
            ) : (
                <span className="bg-primary-container h-1 w-6 rounded-full" />
            )}
            <span>{children}</span>
        </div>
    );
}