"use client";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Input } from "@/components/ui/input";
import type { ForgejoRepository } from "@/lib/api-forgejo";

type ForgejoIssueFiltersProps = {
  stateFilter: string;
  onStateChange: (value: string) => void;
  repoFilter: string;
  onRepoChange: (value: string) => void;
  search: string;
  onSearchChange: (value: string) => void;
  repos: ForgejoRepository[];
};

export function ForgejoIssueFilters({
  stateFilter,
  onStateChange,
  repoFilter,
  onRepoChange,
  search,
  onSearchChange,
  repos,
}: ForgejoIssueFiltersProps) {
  return (
    <div className="mb-4 grid gap-3 rounded-xl border border-[color:var(--border)] bg-[color:var(--surface)] p-3 shadow-lush sm:grid-cols-[140px_minmax(200px,280px)_minmax(220px,1fr)]">
      <Select value={stateFilter} onValueChange={onStateChange}>
        <SelectTrigger>
          <SelectValue placeholder="State" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="open">Open</SelectItem>
          <SelectItem value="closed">Closed</SelectItem>
          <SelectItem value="all">All</SelectItem>
        </SelectContent>
      </Select>

      <Select value={repoFilter} onValueChange={onRepoChange}>
        <SelectTrigger>
          <SelectValue placeholder="Repository" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">All repositories</SelectItem>
          {repos.map((r) => (
            <SelectItem key={r.id} value={r.id}>
              {r.display_name || `${r.owner}/${r.repo}`}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>

      <Input
        placeholder="Search Git Project issues…"
        value={search}
        onChange={(e) => onSearchChange(e.target.value)}
        className="min-w-0"
      />
    </div>
  );
}
