'use client';

/**
 * Barre de filtres compacte : recherche par nom + type + visibilité.
 * État contrôlé par le parent.
 */

import { Input, Select } from '@zen/core/shared/components';

const KIND_OPTIONS = [
  { value: '',         label: 'Tous les types' },
  { value: 'image',    label: 'Images' },
  { value: 'video',    label: 'Vidéos' },
  { value: 'audio',    label: 'Audio' },
  { value: 'document', label: 'Documents' },
  { value: 'other',    label: 'Autre' },
];

const VISIBILITY_OPTIONS = [
  { value: '',        label: 'Toute visibilité' },
  { value: 'public',  label: 'Public' },
  { value: 'private', label: 'Privé' },
];

export default function MediaFilters({ filters, onChange }) {
  const update = (patch) => onChange({ ...filters, ...patch });

  return (
    <div className="flex flex-col sm:flex-row gap-2">
      <div className="flex-1">
        <Input
          type="search"
          value={filters.search || ''}
          onChange={(value) => update({ search: value })}
          placeholder="Rechercher par nom de fichier..."
        />
      </div>
      <div className="w-full sm:w-44">
        <Select
          value={filters.kind || ''}
          onChange={(value) => update({ kind: value })}
          options={KIND_OPTIONS}
          placeholder=""
        />
      </div>
      <div className="w-full sm:w-44">
        <Select
          value={filters.visibility || ''}
          onChange={(value) => update({ visibility: value })}
          options={VISIBILITY_OPTIONS}
          placeholder=""
        />
      </div>
    </div>
  );
}
