'use client';

import { IconButton } from '@/ui/IconButton';
import { Input } from '@/ui/Input';
import { Select } from '@/ui/Select';
import { ControlBar } from '@/ui/ControlBar';
import { SegmentedControl } from '@/ui/SegmentedControl';
import { Icon } from '@/ui/Icon';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Grid, List, Search } from 'lucide-react';
import React from 'react';

export interface MediaFiltersBarProps {
  searchQuery: string;
  onSearchChange: (query: string) => void;
  category: string;
  onCategoryChange: (category: string) => void;
  categories: { label: string; value: string }[];
  viewMode?: 'grid' | 'list';
  onViewModeChange?: (mode: 'grid' | 'list') => void;
}

export function MediaFiltersBar({
  searchQuery,
  onSearchChange,
  category,
  onCategoryChange,
  categories,
  viewMode = 'grid',
  onViewModeChange,
}: MediaFiltersBarProps) {
  return (
    <Box marginBottom={6}>
      <ControlBar
        leftContent={
          <Box maxWidth="32rem" fullWidth>
            <Input
              placeholder="Search media assets..."
              value={searchQuery}
              onChange={(e) => onSearchChange(e.target.value)}
              icon={<Icon icon={Search} size={4} intent="low" />}
              fullWidth
            />
          </Box>
        }
      >
        <Group gap={4}>
          <Box width="10rem">
            <Select
              value={category}
              onChange={(e) => onCategoryChange(e.target.value)}
              options={categories}
            />
          </Box>

          {onViewModeChange && (
            <SegmentedControl
              options={[
                { id: 'grid', label: '', icon: <Icon icon={Grid} size={4} /> },
                { id: 'list', label: '', icon: <Icon icon={List} size={4} /> },
              ]}
              activeId={viewMode}
              onChange={(id) => onViewModeChange(id as 'grid' | 'list')}
            />
          )}
        </Group>
      </ControlBar>
    </Box>
  );
}
