import React from 'react';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';

export type GalleryFilter = 'latest' | 'popular' | 'mine';

export default function FiltersBar({ value, onChange }: { value: GalleryFilter; onChange: (v: GalleryFilter) => void }) {
  return (
    <div className="mb-3 flex items-center justify-between">
      <ToggleGroup type="single" value={value} onValueChange={(v) => v && onChange(v as GalleryFilter)}>
        <ToggleGroupItem value="latest">Neueste</ToggleGroupItem>
        <ToggleGroupItem value="popular">Beliebt</ToggleGroupItem>
        <ToggleGroupItem value="mine">Meine</ToggleGroupItem>
      </ToggleGroup>
    </div>
  );
}

