import { FC } from 'react';

interface IconCategoryProps {
    className?: string;
    fill?: boolean;
    duotone?: boolean;
}

const IconCategory: FC<IconCategoryProps> = ({ className, fill = false, duotone = true }) => {
    return (
        <>
            {!fill ? (
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" className={className}>
                    <g fill="none" stroke="currentColor" strokeWidth="1.5">
                        <path opacity={duotone ? '0.5' : '1'} d="M12 9a3 3 0 1 1 0-6a3 3 0 0 1 0 6ZM5.5 21a3 3 0 1 1 0-6a3 3 0 0 1 0 6Zm13 0a3 3 0 1 1 0-6a3 3 0 0 1 0 6Z"/>
                        <path opacity={duotone ? '0.5' : '1'} strokeLinecap="round" d="M20 13a7.98 7.98 0 0 0-2.708-6M4 13a7.98 7.98 0 0 1 2.708-6M10 20.748A8 8 0 0 0 12 21a8 8 0 0 0 2-.252"/>
                    </g>
                </svg>
            ) : (
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" className={className}>
                    <g fill="none" stroke="currentColor" strokeWidth="1.5">
                        <path opacity={duotone ? '0.5' : '1'} d="M12 9a3 3 0 1 1 0-6a3 3 0 0 1 0 6ZM5.5 21a3 3 0 1 1 0-6a3 3 0 0 1 0 6Zm13 0a3 3 0 1 1 0-6a3 3 0 0 1 0 6Z"/>
                        <path opacity={duotone ? '0.5' : '1'} strokeLinecap="round" d="M20 13a7.98 7.98 0 0 0-2.708-6M4 13a7.98 7.98 0 0 1 2.708-6M10 20.748A8 8 0 0 0 12 21a8 8 0 0 0 2-.252"/>
                    </g>
                </svg>
            )}
        </>
    );
};

export default IconCategory;