"use client";

import { Tabs } from "@heroui/react";
import { ORDER_TAB_FILTERS } from "@/lib/orders";
import type { Key } from "react";

interface Props {
  activeFilter: string;
  onFilterChange: (filterId: string) => void;
}

export function OrderStatusFilter({ activeFilter, onFilterChange }: Props) {
  return (
    <Tabs
      selectedKey={activeFilter}
      onSelectionChange={(key: Key) => onFilterChange(String(key))}
    >
      <Tabs.ListContainer>
        <Tabs.List aria-label="Filter orders by status">
          {ORDER_TAB_FILTERS.map((tab) => (
            <Tabs.Tab key={tab.id} id={tab.id}>
              {tab.label}
              <Tabs.Indicator className="rounded-full bg-white shadow-sm" />
            </Tabs.Tab>
          ))}
        </Tabs.List>
      </Tabs.ListContainer>
    </Tabs>
  );
}
