Extraction Strategy Select

"use client"

import * as React from "react"

import { Badge } from "@/components/ui/badge"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export interface ExtractionStrategyOption {
  value: string
  label: React.ReactNode
  description?: React.ReactNode
  recommended?: boolean
  disabled?: boolean
}

export interface ExtractionStrategySelectProps {
  value?: string
  onValueChange?: (value: string, option: ExtractionStrategyOption) => void
  options: ExtractionStrategyOption[]
  label?: React.ReactNode
  placeholder?: string
  recommendedLabel?: React.ReactNode
  unavailableLabel?: React.ReactNode
  disabled?: boolean
  loading?: boolean
  className?: string
}

export function ExtractionStrategySelect({
  value,
  onValueChange,
  options,
  label = "Extraction",
  placeholder = "Select strategy",
  recommendedLabel = "Recommended",
  unavailableLabel = "Unavailable",
  disabled = false,
  loading = false,
  className,
}: ExtractionStrategySelectProps) {
  return (
    <div className="flex flex-wrap items-center gap-2">
      {label ? (
        <span className="text-muted-foreground text-sm whitespace-nowrap">
          {label}
        </span>
      ) : null}
      <Select
        value={value}
        onValueChange={(next) => {
          const option = options.find((item) => item.value === next)
          if (option) onValueChange?.(next, option)
        }}
        disabled={disabled || loading || options.length === 0}
      >
        <SelectTrigger className={className ?? "h-9 w-52"}>
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        <SelectContent>
          {options.map((option) => (
            <SelectItem
              key={option.value}
              value={option.value}
              disabled={option.disabled}
            >
              <span className="flex w-full items-center justify-between gap-3">
                <span className="min-w-0">
                  <span className="block truncate">{option.label}</span>
                  {option.description ? (
                    <span className="text-muted-foreground block truncate text-xs">
                      {option.description}
                    </span>
                  ) : null}
                </span>
                {option.recommended ? (
                  <Badge
                    variant="secondary"
                    className="h-5 rounded-sm px-1.5 text-[11px]"
                  >
                    {recommendedLabel}
                  </Badge>
                ) : option.disabled ? (
                  <span className="text-muted-foreground text-xs">
                    {unavailableLabel}
                  </span>
                ) : null}
              </span>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}