Status select

"use client";

import * as React from "react";
import { CircleCheckIcon, CircleDotIcon, CircleIcon, CircleXIcon } from "lucide-react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { cn } from "@/lib/utils";

export type StatusOption = {
  /** The key reported in onValueChange. */
  value: string;
  /** Item text, also shown in the trigger. */
  label: string;
  /** An icon component, for example a lucide icon. Rendered in the trigger and in the list. */
  icon: React.ComponentType<{ className?: string }>;
};

/** The usual four issue states. Pass your own options to replace them. */
export const issueStatusOptions: StatusOption[] = [
  { value: "backlog", label: "Backlog", icon: CircleIcon },
  { value: "in-progress", label: "In progress", icon: CircleDotIcon },
  { value: "done", label: "Done", icon: CircleCheckIcon },
  { value: "cancelled", label: "Cancelled", icon: CircleXIcon },
];

type RootProps = React.ComponentProps<typeof Select>;

type StatusSelectProps = Omit<React.ComponentProps<typeof SelectTrigger>, "value" | "defaultValue" | "children"> &
  Pick<RootProps, "value" | "defaultValue" | "onValueChange" | "name" | "disabled" | "required"> & {
    /** The options, in list order. */
    options?: StatusOption[];
    /** Text shown before a value is chosen. */
    placeholder?: string;
    /** Trigger height: sm is 28px, default is 32px. */
    size?: "sm" | "default";
  };

/**
 * A select whose options carry an icon, shown in the trigger and in the list.
 * Icons are monochrome: muted at rest, foreground when the item is highlighted or chosen.
 */
export function StatusSelect({
  options = issueStatusOptions,
  placeholder = "Status",
  size = "default",
  value,
  defaultValue,
  onValueChange,
  name,
  disabled,
  required,
  className,
  ...props
}: StatusSelectProps) {
  return (
    <Select
      value={value}
      defaultValue={defaultValue}
      onValueChange={onValueChange}
      name={name}
      disabled={disabled}
      required={required}
    >
      <SelectTrigger size={size} className={cn("min-w-32", className)} {...props}>
        <SelectValue placeholder={placeholder} />
      </SelectTrigger>
      <SelectContent position="popper" className="rounded-md">
        {options.map(({ value: optionValue, label, icon: Icon }) => (
          <SelectItem
            key={optionValue}
            value={optionValue}
            className="h-8 rounded-sm focus:bg-muted focus:text-foreground"
          >
            <Icon className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
            <span className="truncate">{label}</span>
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}