'use client';

import { observer } from 'mobx-react-lite';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import Selector from '@/components/select/Selector';
import { VinylIcon } from '@/icons';

interface SearchFiltersProps {
  isInstrumental: boolean;
  modelVersion?: string;
  onFilterChange: (isInstrumental: boolean, modelVersion?: string) => void;
}

const SearchFilters = observer(
  ({ isInstrumental, modelVersion, onFilterChange }: SearchFiltersProps) => {
    const MODEL_VERSIONS = [
      { key: '', name: 'All Models' },
      { key: 'v4', name: 'Version 4' },
      { key: 'auk', name: 'Version 4.5' },
      { key: 'crow', name: 'Version 5' },
    ];

    const handleInstrumentalChange = () => {
      onFilterChange(!isInstrumental, modelVersion);
    };

    const handleModelVersionChange = (key: string) => {
      onFilterChange(isInstrumental, key || undefined);
    };

    return (
      <div className='mb-4 flex flex-row items-center gap-4 px-6'>
        <div className='flex items-center'>
          <span className='mr-2 text-sm font-medium'>Model Version:</span>
          <Selector
            selections={MODEL_VERSIONS}
            onChange={handleModelVersionChange}
          />
        </div>
        <Button
          variant={ButtonVariant.Secondary}
          shape={ButtonShape.Pill}
          size={ButtonSize.Mini}
          onClick={handleInstrumentalChange}
          icon={VinylIcon}
          active={isInstrumental}
        >
          Instrumental Only
        </Button>
      </div>
    );
  }
);

export default SearchFilters;