'use client'
import React from 'react'

interface Tab {
    key: 'Processing' | 'Delivered' | 'Cancelled' | 'Returned'
    label: string
    count: number
}

interface OrderTabsProps {
    activeTab: 'Processing' | 'Delivered' | 'Cancelled' | 'Returned'
    setActiveTab: (tab: 'Processing' | 'Delivered' | 'Cancelled' | 'Returned') => void
    tabCounts: {
        current: number
        delivered: number
        returned: number
        cancelled: number
    }
}

const OrderTabs: React.FC<OrderTabsProps> = ({ activeTab, setActiveTab, tabCounts }) => {
    const tabs: Tab[] = [
        { key: 'Processing', label: 'جاری', count: tabCounts.current },
        { key: 'Delivered', label: 'تحویل شده', count: tabCounts.delivered },
        { key: 'Returned', label: 'مرجوع شده', count: tabCounts.returned },
        { key: 'Cancelled', label: 'لغو شده', count: tabCounts.cancelled }
    ]

    return (
        <div className='mt-6 sm:mt-8 md:mt-10 lg:mt-14 border-b border-gray-200'>
            <div className='flex gap-2 sm:gap-4 lg:gap-8 overflow-x-auto'>
                {tabs.map((tab) => (
                    <button
                        key={tab.key}
                        onClick={() => setActiveTab(tab.key)}
                        className={`pb-3 sm:pb-4 px-1 sm:px-2 border-b-2 transition-colors whitespace-nowrap ${activeTab === tab.key
                            ? 'border-primary text-primary'
                            : 'border-transparent text-gray-600 hover:text-gray-800'
                            }`}
                    >
                        <span className='ml-1 sm:ml-2 text-xs sm:text-sm'>{tab.label}</span>
                        <span className={`inline-flex items-center justify-center min-w-[16px] sm:min-w-[20px] h-4 sm:h-5 px-1 sm:px-1.5 text-xs rounded-full ${activeTab === tab.key
                            ? 'bg-primary text-white'
                            : 'bg-gray-200 text-gray-600'
                            }`}>
                            {tab.count}
                        </span>
                    </button>
                ))}
            </div>
        </div>
    )
}

export default OrderTabs
