"use client"

import { Button } from "@/components/ui/button"

interface FilterBarProps {
  activeCategory: string
  onFilter: (category: string) => void
}

export function FilterBar({ activeCategory, onFilter }: FilterBarProps) {
  const categories = [
    { id: "all", name: "全部作品" },
    { id: "urban", name: "城市风光" },
    { id: "nature", name: "自然风景" },
    { id: "portrait", name: "人像摄影" },
    { id: "street", name: "街头摄影" },
    { id: "architecture", name: "建筑摄影" },
    { id: "macro", name: "微距摄影" },
  ]

  return (
    <div className="flex flex-wrap justify-center gap-2 mb-12">
      {categories.map((category) => (
        <Button
          key={category.id}
          variant={activeCategory === category.id ? "default" : "outline"}
          size="sm"
          onClick={() => onFilter(category.id)}
          className="transition-all duration-200 hover:scale-105"
        >
          {category.name}
        </Button>
      ))}
    </div>
  )
}