"use client";

import { ArrowUpDown } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

type SortableColumn = {
  toggleSorting: (desc?: boolean) => void;
  getIsSorted: () => false | "asc" | "desc";
};

export function CustomerSortableHeader({
  label,
  column,
}: {
  label: string;
  column: SortableColumn;
}) {
  return (
    <Button
      variant="ghost"
      size="sm"
      className="-ml-2 h-8 px-2 font-medium"
      onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
    >
      {label}
      <ArrowUpDown className="size-3.5 text-muted-foreground" />
    </Button>
  );
}

export function CustomerRangeFilterInputs({
  fromValue = "",
  toValue = "",
  onFromChange,
  onToChange,
}: {
  fromValue?: string;
  toValue?: string;
  onFromChange?: (value: string) => void;
  onToChange?: (value: string) => void;
} = {}) {
  return (
    <div className="flex min-w-24 flex-col gap-1">
      <Input
        className="h-7 text-xs"
        placeholder="From"
        value={fromValue}
        onChange={onFromChange ? (event) => onFromChange(event.target.value) : undefined}
      />
      <Input
        className="h-7 text-xs"
        placeholder="To"
        value={toValue}
        onChange={onToChange ? (event) => onToChange(event.target.value) : undefined}
      />
    </div>
  );
}