"use client";

import React, { useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const ALL_ARTICLES = "همه مطالب";

const data = [
  {
    id: 1,
    title: "شروع کار با توسعه وب مدرن: راهنمای جامع",
    description:
      "با اصول توسعه وب مدرن آشنا شوید. ابزارها، فریم‌ورک‌ها و بهترین روش‌هایی که به ساخت اپلیکیشن‌های وب پایدار و مقیاس‌پذیر در محیط توسعه پرشتاب امروز کمک می‌کنند.",
    author: "سارا احمدی",
    date: "۲۵ اسفند ۱۴۲",
    category: "توسعه وب",
    link: "#",
  },
  {
    id: 2,
    title: "راهنمای جامع مدیریت state در اپلیکیشن‌های فرانت‌اند",
    description:
      "رویکردهای مختلف مدیریت state در اپلیکیشن‌های فرانت‌اند را بررسی کنید. از state محلی تا راه‌حل‌های سراسری  چگونه استراتژی مناسب را برای نیاز و پیچیدگی پروژه انتخاب کنید.",
    author: "امیر ویلسون",
    date: "۲۲ اسفند ۱۴۲",
    category: "فرانت‌اند",
    link: "#",
  },
  {
    id: 3,
    title: "ساخت سیستم‌های سمت سرور مقیاس‌پذیر: بهترین روش‌ها و الگوها",
    description:
      "طراحی و پیاده‌سازی سیستم‌های بک‌اند را بیاموزید که با رشد اپلیکیشن شما گسترش می‌یابند. الگوهای معماری، تکنیک‌های بهینه‌سازی و ملاحظات زیرساخت برای توسعه مدرن.",
    author: "محمد رضایی",
    date: "۱۸ اسفند ۱۴۲",
    category: "سمت سرور",
    link: "#",
  },
  {
    id: 4,
    title: "تسلط بر معماری کامپوننت در توسعه فرانت‌اند",
    description:
      "ساخت کامپوننت‌های قابل نگهداری و استفاده مجدد را عمیق‌تر بررسی کنید. الگوهای طراحی کامپوننت، مدیریت state و بهترین روش‌ها برای معماری‌های مقیاس‌پذیر.",
    author: "اما ژانگ",
    date: "۱۵ اسفند ۱۴۲",
    category: "فرانت‌اند",
    link: "#",
  },
  {
    id: 5,
    title: "بهینه‌سازی کارایی اپلیکیشن: از تئوری تا عمل",
    description:
      "تکنیک‌های عملی بهبود کارایی اپلیکیشن را کشف کنید. از بهینه‌سازی در سطح کد تا تنظیم زیرساخت  چگونه تجربه‌ای سریع‌تر و کارآمدتر ارائه دهید.",
    author: "رضا پاک",
    date: "۱۳ اسفند ۱۴۲",
    category: "توسعه وب",
    link: "#",
  },
  {
    id: 6,
    title: "بهترین روش‌های امنیت در توسعه سمت سرور",
    description:
      "مفاهیم امنیتی ضروری و استراتژی‌های پیاده‌سازی برای محافظت از سیستم‌های بک‌اند. آسیب‌پذیری‌های رایج، روش‌های احراز هویت و حفاظت از داده.",
    author: "لیلا محمدی",
    date: "۹ اسفند ۱۴۲",
    category: "سمت سرور",
    link: "#",
  },
  {
    id: 7,
    title: "استراتژی‌های مدرن تست فرانت‌اند",
    description:
      "رویکردهای جامع تست اپلیکیشن‌های فرانت‌اند را بیاموزید. از تست واحد کامپوننت‌ها تا تست end-to-end  چگونه کد فرانت‌اند قابل اعتماد و نگهداری بماند.",
    author: "علی کریمی",
    date: "۶ اسفند ۱۴۲",
    category: "فرانت‌اند",
    link: "#",
  },
  {
    id: 8,
    title: "طراحی و بهینه‌سازی پایگاه داده برای سیستم‌های بک‌اند",
    description:
      "اصول طراحی و بهینه‌سازی پایگاه داده برای اپلیکیشن‌های سمت سرور. طراحی schema، استراتژی‌های ایندکس‌گذاری و بهینه‌سازی کوئری.",
    author: "راحله مارتینز",
    date: "۳ اسفند ۱۴۲",
    category: "سمت سرور",
    link: "#",
  },
  {
    id: 9,
    title: "ساخت رابط‌های وب واکنش‌گرا",
    description:
      "هنر ساخت رابط‌های وب واکنش‌گرا و تطبیقی را بیاموزید. تکنیک‌های مدرن استایل‌دهی، طراحی mobile-first و استراتژی‌های بهینه‌سازی کارایی.",
    author: "کیوان اندرسون",
    date: "۳۰ بهمن ۱۴۲",
    category: "توسعه وب",
    link: "#",
  },
  {
    id: 10,
    title: "طراحی اتصال هوشمند و الگوهای یکپارچه‌سازی",
    description:
      "بهترین روش‌های طراحی و یکپارچه‌سازی اتصال هوشمند در اپلیکیشن‌ها. اصول RESTful، استراتژی‌های احراز هویت و الگوهای مدیریت خطا.",
    author: "نینا پاتیل",
    date: "۲۶ بهمن ۱۴۲",
    category: "سمت سرور",
    link: "#",
  },
];

interface Blog17Props {
  className?: string;
}

const Blog17 = ({ className }: Blog17Props) => {
  const [selectedCategory, setSelectedCategory] = useState(ALL_ARTICLES);

  const categories = [
    ALL_ARTICLES,
    ...Array.from(new Set(data.map((item) => item.category))),
  ];

  const filteredData =
    selectedCategory === ALL_ARTICLES
      ? data
      : data.filter((item) => item.category === selectedCategory);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-6 text-center">
          <Badge variant="secondary">وبلاگ</Badge>
          <h1 className="text-xl font-bold lg:text-2xll">
            جدیدترین مطالب و به‌روزرسانی‌ها
                                </h1>
          <p className="text-balance lg:text-xl">
            با جدیدترین روندها، آموزش‌ها و بهترین روش‌های توسعه نرم‌افزار به‌روز
            بمانید. کارشناسان ما دانش خود را برای ساخت اپلیکیشن‌های بهتر به
            اشتراک می‌گذارند.
          </p>
        </div>
        <div className="mx-auto mt-20 grid max-w-7xl grid-cols-1 gap-20 lg:grid-cols-4">
          <div className="hidden flex-col gap-2 lg:flex">
            {categories.map((category) => (
              <Button
                variant="ghost"
                key={category}
                onClick={() => setSelectedCategory(category)}
                className={cn(
                  "justify-start text-start",
                  selectedCategory === category &&
                    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                )}
              >
                {category}
              </Button>
            ))}
          </div>
          <div className="lg:col-span-3">
            {filteredData.map((item) => (
              <React.Fragment key={item.id}>
                <a href={item.link} className="flex flex-col gap-3 text-start">
                  <p className="text-sm font-semibold text-muted-foreground">
                    {item.category}
                  </p>
                  <h3 className="text-xl font-semibold text-balance lg:text-3xl">
                    {item.title}
                  </h3>
                  <p className="text-muted-foreground">{item.description}</p>
                  <div className="mt-3 flex items-center gap-2 text-sm">
                    <span className="font-medium">{item.author}</span>
                    <span className="text-muted-foreground">
                      · {item.date}
                    </span>
                  </div>
                </a>
                <Separator className="my-8" />
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Blog17 };