'use client';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { ScrollArea } from '@/components/ui/scroll-area';

interface FilterSelectorProps {
  options: string[];
  selectedValue: string;
  onSelectValue: (value: string) => void;
}

export default function FilterSelector({ options, selectedValue, onSelectValue }: FilterSelectorProps) {

  return (
    <ScrollArea className="h-[400px]">
        <div className="space-y-2 flex flex-col items-start pr-4">
          {options.map((option) => {
            const capitalizedOption = option === 'all' ? 'Mostrar todos' : option.charAt(0).toUpperCase() + option.slice(1);
            return (
              <Button
                key={option}
                variant="ghost"
                onClick={() => onSelectValue(option)}
                className={cn(
                  'w-full justify-start text-left',
                  selectedValue === option ? 'bg-accent text-accent-foreground' : ''
                )}
              >
                {capitalizedOption}
              </Button>
            );
          })}
        </div>
    </ScrollArea>
  );
}