import React from 'react'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Ic } from '@/icons'
import { cn } from '@/lib/utils'

export interface SortOption<T extends string = string> {
  value: T
  label: string
}

export interface SortDropdownProps<T extends string = string> {
  value: T
  onChange: (value: T) => void
  options: SortOption<T>[]
  label?: string
  placeholder?: string
  size?: 'sm' | 'default'
  className?: string
  triggerClassName?: string
}

export default function SortDropdown<T extends string = string>({
  value,
  onChange,
  options,
  label = 'مرتب‌سازی:',
  placeholder = 'مرتب‌سازی بر اساس...',
  size = 'default',
  className,
  triggerClassName,
}: SortDropdownProps<T>) {
  return (
    <div className={cn('flex items-center gap-2', className)}>
      {label && (
        <span className="text-[11.5px] font-semibold text-muted-foreground whitespace-nowrap">
          {label}
        </span>
      )}
      <Select value={value} onValueChange={onChange}>
        <SelectTrigger
          size={size}
          className={cn(
            'min-w-[9.5rem] bg-card/60 hover:bg-card border-border/60 transition-colors',
            triggerClassName,
          )}
        >
          <div className="flex items-center gap-1.5 truncate">
            <Ic name="arrowUpDown" className="size-3.5 shrink-0 text-primary" />
            <SelectValue placeholder={placeholder} />
          </div>
        </SelectTrigger>

        <SelectContent className="min-w-[10rem]">
          {options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              <span>{option.label}</span>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}