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

const sizes = {
    sm: 'h-10 w-10 rounded-xl text-xl',
    md: 'h-12 w-12 rounded-xl text-2xl',
    lg: 'h-14 w-14 rounded-2xl text-3xl',
} as const;

const tones = {
    soft: 'border border-primary/30 bg-primary-container/10 text-primary dark:bg-primary-container/20',
    solid: 'bg-primary-container text-white',
    neutral:
        'border border-outline-variant/50 bg-surface-container-high text-primary',
} as const;

type IconTileProps = {
    icon: string;
    size?: keyof typeof sizes;
    tone?: keyof typeof tones;
    /** Fill with crimson when the parent `group` is hovered. */
    groupHover?: boolean;
    className?: string;
};

export default function IconTile({
    icon,
    size = 'sm',
    tone = 'soft',
    groupHover = false,
    className,
}: IconTileProps) {
    return (
        <div
            className={cn(
                'flex shrink-0 items-center justify-center transition-all',
                sizes[size],
                tones[tone],
                groupHover &&
                    'group-hover:bg-primary-container group-hover:text-white',
                className,
            )}
        >
            <Icon name={icon} />
        </div>
    );
}