import React from 'react';
import { Icon } from '@iconify/react';
import { useTheme } from 'styled-components';
import { themeNames } from './names';

import light from '@iconify/icons-ic/baseline-brightness-7';
import dark from '@iconify/icons-ic/baseline-brightness-5';
import system from '@iconify/icons-ic/baseline-brightness-6';

export const ICONS = {
    [themeNames[1]]: light,
    [themeNames[2]]: dark,
    [themeNames[3]]: system,

} as const;

type IconName = keyof typeof ICONS;

interface IconsProps {
    name: IconName,
    width?: string
    height?: string
    setColor?: string
}

export const IconComponent = ({ name, width = "24", height = "24", setColor}: IconsProps) => {
    const theme = useTheme();
    return (
        <Icon 
            icon={ICONS[name]} 
            width={width} 
            height={height} 
            color={setColor || theme.textColor} 
        />
    );
}