import React from "react";
import {LucideIcon} from "lucide-react";

type IconContainerSize = 'sm' | 'md' | 'lg' | 'xl';
type IconContainerShape = 'square' | 'rounded' | 'circle';

interface IconContainerProps {
    icon: LucideIcon;
    size?: IconContainerSize;
    shape?: IconContainerShape;
    filled?: boolean;
}

const sizeClasses: Record<IconContainerSize, { container: string; icon: string }> = {
    sm: {container: 'w-10 h-10', icon: 'w-4 h-4'},
    md: {container: 'w-12 h-12', icon: 'w-5 h-5'},
    lg: {container: 'w-16 h-16', icon: 'w-8 h-8'},
    xl: {container: 'w-20 h-20', icon: 'w-10 h-10'},
};

const shapeClasses: Record<IconContainerShape, string> = {
    square: 'rounded-lg',
    rounded: 'rounded-2xl',
    circle: 'rounded-full',
};

export default function IconContainer(
    {
        icon: Icon,
        size = 'sm',
        shape = 'square',
        filled = false,
    }: IconContainerProps) {
    const sizeConfig = sizeClasses[size];

    return (
        <div
            className={`
                ${filled ? 'bg-primary' : 'bg-primary/10'} flex items-center justify-center
                ${sizeConfig.container}
                ${shapeClasses[shape]}
            `}
        >
            <Icon className={`${filled ? 'text-text-primary' : 'text-primary'} ${sizeConfig.icon}`} strokeWidth={1.75}/>
        </div>
    );
}