'use client'

import { useState } from 'react'
import { ChevronDown, ArrowUpDown } from 'lucide-react'

export interface SortOption {
  value: string
  label: string
}

interface SortDropdownProps {
  options: SortOption[]
  value: string
  onChange: (value: string) => void
  totalItems?: number
}

export default function SortDropdown({ options, value, onChange, totalItems }: SortDropdownProps) {
  const [isOpen, setIsOpen] = useState(false)

  const currentLabel = options.find(opt => opt.value === value)?.label || options[0]?.label

  return (
    <div className="flex flex-wrap justify-between items-center gap-4 mb-6">
      {totalItems !== undefined && (
        <p className="text-gray-custom text-sm">{totalItems} items found</p>
      )}
      
      <div className="relative">
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="flex items-center gap-2 px-4 py-2 bg-white border border-gray-200 rounded-lg text-dark text-sm font-medium hover:border-primary transition-colors"
        >
          <ArrowUpDown size={16} className="text-primary" />
          Sort by: {currentLabel}
          <ChevronDown size={14} className={`transition-transform ${isOpen ? 'rotate-180' : ''}`} />
        </button>
        
        {isOpen && (
          <div className="absolute top-full right-0 mt-2 w-48 bg-white rounded-xl shadow-lg border border-gray-100 z-20 overflow-hidden">
            {options.map((option) => (
              <button
                key={option.value}
                onClick={() => {
                  onChange(option.value)
                  setIsOpen(false)
                }}
                className={`block w-full text-left px-4 py-2 text-sm transition-colors ${
                  value === option.value
                    ? 'text-primary font-semibold bg-primary/5'
                    : 'text-dark hover:bg-gray-50'
                }`}
              >
                {option.label}
              </button>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}