import React, {FC} from "react";
import classNames from "classnames";
import {Color, ColorWithCustomTint, resolveTint} from "./Color";
import {colors} from "./Colors";

export type IconicTabProps = {
    icon: React.ReactNode,
    label: string,
    isSelected: boolean,
    color?: Color | ColorWithCustomTint,
}

export const IconicTab: FC<IconicTabProps> = ({icon, label, isSelected, color}) => {
    const themeColor = color || colors.purple

    return <div className={classNames('flex items-center space-x-2')}>
        <div className={classNames(' rounded-[8px] p-[4px]', {
            [resolveTint(themeColor, 'iconic-tab.selected.background', 'bg-purple-tint-90', 'background')]: isSelected,
            'bg-gray-400': !isSelected,
        })}>
            {icon}
        </div>
        <div className={classNames('text-1x ', {
            [resolveTint(themeColor, 'iconic-tab.selected.text', 'text-purple-normal', 'get', 'text.dark.primary')]: isSelected,
            'text-gray-400': !isSelected,
        })}>{label}</div>
    </div>}