"use client";

import { useState } from "react";
import { useTranslation } from "@/hooks/useTranslation";

interface DeptChip {
  key: string;
  label: string;
  count: number;
}

export function CareersFilterBar() {
  const { t } = useTranslation("careers");
  const [activeChip, setActiveChip] = useState("all");

  const chips: DeptChip[] = [
    { key: "all", label: t("filter.chip_all"), count: 14 },
    { key: "reporting", label: t("filter.chip_reporting"), count: 5 },
    { key: "editorial", label: t("filter.chip_editorial"), count: 2 },
    { key: "audio", label: t("filter.chip_audio"), count: 1 },
    { key: "video", label: t("filter.chip_video"), count: 1 },
    { key: "product", label: t("filter.chip_product"), count: 2 },
    { key: "eng", label: t("filter.chip_eng"), count: 2 },
    { key: "ops", label: t("filter.chip_ops"), count: 1 },
  ];

  return (
    <div className="jobs-filter-bar">
      <div className="wrap">
        <div className="jobs-filter-row">
          <div className="jobs-search">
            <svg viewBox="0 0 24 24">
              <circle cx="11" cy="11" r="8" />
              <path d="m21 21-4.35-4.35" />
            </svg>
            <input type="text" placeholder={t("filter.search_placeholder")} />
          </div>
          <select className="fsel">
            <option value="">{t("filter.loc_all")}</option>
            <option value="mumbai">{t("filter.loc_mumbai")}</option>
            <option value="delhi">{t("filter.loc_delhi")}</option>
            <option value="bengaluru">{t("filter.loc_bengaluru")}</option>
            <option value="kolkata">{t("filter.loc_kolkata")}</option>
            <option value="chennai">{t("filter.loc_chennai")}</option>
            <option value="hyderabad">{t("filter.loc_hyderabad")}</option>
            <option value="remote">{t("filter.loc_remote")}</option>
          </select>
          <select className="fsel">
            <option value="">{t("filter.type_all")}</option>
            <option value="full">{t("filter.type_full")}</option>
            <option value="contract">{t("filter.type_contract")}</option>
            <option value="internship">{t("filter.type_internship")}</option>
            <option value="fellowship">{t("filter.type_fellowship")}</option>
          </select>
          <select className="fsel">
            <option value="">{t("filter.exp_any")}</option>
            <option value="entry">{t("filter.exp_entry")}</option>
            <option value="mid">{t("filter.exp_mid")}</option>
            <option value="senior">{t("filter.exp_senior")}</option>
            <option value="lead">{t("filter.exp_lead")}</option>
          </select>
        </div>
        <div className="dept-chips">
          {chips.map((chip) => (
            <button
              key={chip.key}
              className={`dept-chip${activeChip === chip.key ? " active" : ""}`}
              onClick={() => setActiveChip(chip.key)}
            >
              {chip.label}
              <span className="ct">{chip.count}</span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}