/**
 * SVG Icon component
 * @todo replace by lucid react
 */

export const defaultIconSize = 20;
/**
 * Enum-like const object+type definition to define icons. 
 * The string corresponds to the path definition of the icon
 */
export const Icon = {
  LookingGlass: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z",
  X: "M6 18L18 6M6 6l12 12",
  Plus:  "M3 12L21 12M12 3L12 21",
  ArrowUp: "M3 18L12 6L21 18",
  ArrowDown: "M3 6L12 18L21 6",
} as const;

export type Icon = typeof Icon[keyof typeof Icon];

type SvgIconProps = {
    icon : Icon
    color?: string // optional stroke color
    hoverColor?: string // optional hover color, set to undefined to deactivate hover
}

export default function SvgIcon({icon, color="text-gray-400", hoverColor="text-gray-500"} : SvgIconProps){
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            className={`h-6 w-6 ${color} ${hoverColor !== undefined ? "hover:"+hoverColor : ""}`}
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
            >
            <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d={icon}
            />
        </svg>
    )
}