import { cn } from '@/lib/utils';

type IconProps = {
    /** Material Symbols ligature name, e.g. `call` or `arrow_forward`. */
    name: string;
    filled?: boolean;
    /** Size and color utilities, e.g. `text-xl text-primary`. */
    className?: string;
};

/**
 * Google's Material Symbols stylesheet is unlayered and fixes the glyph at
 * 24px, which beats Tailwind's layered utilities. The glyph therefore
 * inherits its size from this wrapper, where utilities apply normally.
 */
export default function Icon({ name, filled = false, className }: IconProps) {
    return (
        <span
            aria-hidden="true"
            className={cn(
                'inline-flex shrink-0 leading-none select-none',
                className,
            )}
        >
            <span
                className="material-symbols-outlined"
                style={{
                    fontSize: 'inherit',
                    fontVariationSettings: filled ? "'FILL' 1" : undefined,
                }}
            >
                {name}
            </span>
        </span>
    );
}