import { Link, usePage } from '@inertiajs/react'
import { cn } from '@ui/lib/utils'

const SAMPLE_TYPE_TABS = [
    { label: 'Item Sampel', href: '/master-data/sample-items' },
    { label: 'Kategori', href: '/master-data/sample-type-categories' },
    { label: 'Parameter per Item Sampel', href: '/master-data/sample-type-parameters' },
] as const

export function SampleTypeTabs() {
    const page = usePage()
    const currentPath = (page.url || '').split('?')[0]

    return (
        <div className='inline-flex flex-wrap rounded-lg border bg-muted/30 p-1'>
            {SAMPLE_TYPE_TABS.map((tab) => {
                const active = currentPath === tab.href

                return (
                    <Link
                        key={tab.href}
                        href={tab.href}
                        className={cn(
                            'rounded-md px-3 py-1.5 text-sm transition-colors',
                            active
                                ? 'bg-background font-medium text-foreground shadow-sm'
                                : 'text-muted-foreground hover:text-foreground',
                        )}
                    >
                        {tab.label}
                    </Link>
                )
            })}
        </div>
    )
}