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

import desktop from '@iconify/icons-ic/baseline-menu';

export const ICONS = {
    [toolBarNames[1]]: desktop,
} 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} 
        />
    );
}