"use client"

import Link from "next/link"

import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { listHref, type CurrencyConversionTab } from "./constants"
import type { CurrencyConversionTabOption } from "../_lib/currency-conversion-server-api"

type Props = {
  activeTab: CurrencyConversionTab
  tabs: CurrencyConversionTabOption[]
  pageSize?: number
}

export function CurrencyConversionTabs({
  activeTab,
  tabs,
  pageSize = 50,
}: Props) {
  return (
    <Tabs value={activeTab} className="w-full">
      <TabsList>
        {tabs.map((tab) => (
          <TabsTrigger key={tab.id} value={tab.id} asChild>
            <Link href={listHref({ tab: tab.id, page: 1, pageSize })}>{tab.label}</Link>
          </TabsTrigger>
        ))}
      </TabsList>
    </Tabs>
  )
}