import React, {FC} from "react";
import classNames from "classnames";

export type FilterTabsProps = {
}

const tabs = [
    {
        id: 'bogo',
        label: 'For BOGOs',
        description: 'These are the items that count towards the "Buy" requirement of the deal. What the customer needs to purchase to unlock the offer.'
    },
    {
        id: 'product',
        label: 'For Product Discounts',
        description: 'These are the items that the discount will be applied to.'
    },
    {
        id: 'cart',
        label: 'For Cart Discounts',
        description: 'These are the items that must be present in the cart to unlock the global cart discount.'
    },
    {
        id: 'other',
        label: 'For Other Offers',
        description: 'For other offers like shipping discounts, these are the items that act as the condition to trigger these offers.'
    }
]
export const FilterTabs: FC<FilterTabsProps> = ({}) => {
    const [selectedTab, setSelectedTab] = React.useState<string>('bogo');
    return <div className="space-y-2">
        <div className="flex items-center justify-center gap-2">
            {tabs.map((tab) => (
                <button
                    key={tab.id}
                    className={classNames('rounded-full px-2 h-6 flex items-center text-smaller-1 font-medium', {
                        'bg-gray-200 text-gray-650': selectedTab === tab.id,
                        'text-gray-400': selectedTab !== tab.id,
                    })}
                    onClick={() => setSelectedTab(tab.id)}
                >
                    {tab.label}
                </button>))}
        </div>
        <div className="text-base text-gray-450">
            {tabs.find(tab => tab.id === selectedTab)?.description}
        </div>
    </div>
}
