import { SortAsc, SortDesc, ArrowUpDown } from 'lucide-react';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import { SortState } from '@/pages/Parks';

interface ParkSortOptionsProps {
  sort: SortState;
  onSortChange: (sort: SortState) => void;
}

export function ParkSortOptions({ sort, onSortChange }: ParkSortOptionsProps) {
  const sortOptions = [
    { value: 'name', label: 'Name' },
    { value: 'rating', label: 'Rating' },
    { value: 'rides', label: 'Rides' },
    { value: 'coasters', label: 'Coasters' },
    { value: 'reviews', label: 'Reviews' },
    { value: 'opening', label: 'Opening' },
  ];

  const toggleDirection = () => {
    onSortChange({
      ...sort,
      direction: sort.direction === 'asc' ? 'desc' : 'asc'
    });
  };

  return (
    <div className="flex gap-2">
      <Select 
        value={sort.field} 
        onValueChange={(field) => onSortChange({ ...sort, field })}
      >
        <SelectTrigger className="w-[160px] bg-muted/50 border-border/50">
          <ArrowUpDown className="w-4 h-4 mr-2" />
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          {sortOptions.map(option => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <Button
        variant="outline"
        size="icon"
        onClick={toggleDirection}
        className="shrink-0 bg-muted/50 border-border/50"
      >
        {sort.direction === 'asc' ? (
          <SortAsc className="w-4 h-4" />
        ) : (
          <SortDesc className="w-4 h-4" />
        )}
      </Button>
    </div>
  );
}