"use client";

import * as React from "react";

import { History } from "lucide-react";

import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";

/** "Show expired" pill — shared by the positions sheet and the structure / accumulator panels. */
export function ShowExpiredToggle({ checked, onChange }: { checked: boolean; onChange: (next: boolean) => void }) {
  const id = React.useId();
  return (
    <label
      htmlFor={id}
      className={cn(
        "inline-flex h-8 shrink-0 cursor-pointer select-none items-center gap-2 rounded-full border pr-1.5 pl-3 font-medium text-xs shadow-xs transition-colors",
        checked
          ? "border-indigo-500/30 bg-indigo-500/10 text-indigo-700 dark:text-indigo-300"
          : "border-border/60 bg-background/70 text-muted-foreground hover:bg-muted/60 hover:text-foreground",
      )}
    >
      <History className="size-3.5" />
      Show expired
      <Switch
        id={id}
        size="sm"
        checked={checked}
        onCheckedChange={onChange}
        className="data-checked:bg-indigo-600 dark:data-checked:bg-indigo-500"
      />
    </label>
  );
}