"use client";

import { HStack, Button } from "@chakra-ui/react";
import { useTranslations } from "next-intl";
import { LuCircleDot } from "react-icons/lu";
import { MdSportsSoccer, MdSportsBasketball } from "react-icons/md";
import type { SportType } from "@/lib/api/matches/types";

interface SportFilterProps {
  value: SportType;
  onChange: (sport: SportType) => void;
}

const SPORT_OPTIONS: { value: SportType; icon: React.ReactNode }[] = [
  { value: "football", icon: <MdSportsSoccer /> },
  { value: "basketball", icon: <MdSportsBasketball /> },
];

export default function SportFilter({ value, onChange }: SportFilterProps) {
  const t = useTranslations("matches");

  return (
    <HStack gap={2}>
      {SPORT_OPTIONS.map((sport) => {
        const isActive = value === sport.value;
        return (
          <Button
            key={sport.value}
            onClick={() => onChange(sport.value)}
            variant={isActive ? "solid" : "outline"}
            colorPalette={isActive ? "primary" : "gray"}
            size="sm"
            borderRadius="full"
            gap={1.5}
          >
            {sport.icon}
            {t(sport.value)}
            {isActive && <LuCircleDot size={12} />}
          </Button>
        );
      })}
    </HStack>
  );
}
