"use client";

import { useState } from "react";

export default function AcademyHeader() {
  const [activeFilter, setActiveFilter] = useState("همه مقالات");
  const filters = ["همه مقالات", "شبکه", "امنیت", "برنامه‌نویسی", "DevOps"];

  return (
    <div className="flex flex-col items-center mb-12 text-center md:mb-20">
      <div className="bg-accent/10 border border-accent/20 text-accent px-4 py-1.5 rounded-full text-xs mb-6 flex items-center gap-2">
        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
          />
        </svg>
        آکادمی رابین شبکه
      </div>

      <h1 className="mb-4 text-3xl font-bold md:text-5xl lg:text-6xl">
        دانش و تجربه
        <span className="block mt-2 text-accent">به اشتراک گذاشته شده</span>
      </h1>

      <p className="max-w-2xl mb-10 text-sm text-muted md:text-base">مقالات تخصصی، آموزش‌ها و تجربیات واقعی از پروژه‌های شبکه و نرم‌افزار</p>

      <div className="relative w-full max-w-2xl mb-12">
        <input
          type="text"
          placeholder="جستجو در مقالات..."
          className="w-full px-6 py-4 text-sm transition border bg-panel border-border rounded-xl focus:outline-none focus:border-accent"
        />
        <svg className="absolute w-5 h-5 -translate-y-1/2 text-muted left-4 top-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
      </div>

      <div className="flex flex-wrap justify-center gap-2 md:gap-4">
        {filters.map((filter) => (
          <button
            key={filter}
            onClick={() => setActiveFilter(filter)}
            className={`px-4 py-2 rounded-lg text-sm transition-all border ${
              activeFilter === filter
                ? "bg-accent border-accent text-background font-bold shadow-[0_0_15px_rgba(232,107,53,0.3)]"
                : "bg-panel border-border text-muted hover:border-accent/50 hover:text-foreground"
            }`}
          >
            {filter}
          </button>
        ))}
      </div>
    </div>
  );
}