import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const data = [
  {
    id: 1,
    title: "شروع کار با توسعه وب مدرن",
    description:
      "ابزارها و فریم‌ورک‌های ضروری توسعه وب مدرن را بشناسید. فناوری‌های جدید، بهترین روش‌ها و تکنیک‌های بهینه‌سازی گردش کار برای ساخت اپلیکیشن‌های پایدار.",
    date: "۲۵ اسفند ۱۴۲",
    category: "توسعه وب",
    link: "#",
  },
  {
    id: 2,
    title: "درک اصول طراحی فرانت‌اند",
    description:
      "اصول بنیادی طراحی و توسعه فرانت‌اند را بررسی کنید. چیدمان واکنش‌گرا، الگوهای رابط کاربری، استانداردهای دسترس‌پذیری و ساخت تجربه‌های جذاب.",
    date: "۲۲ اسفند ۱۴۲",
    category: "فرانت‌اند",
    link: "#",
  },
  {
    id: 3,
    title: "راهنمای اصول توسعه سمت سرور",
    description:
      "مفاهیم اصلی توسعه بک‌اند از طراحی پایگاه داده و معماری اتصال هوشمند تا مدیریت سرور را بیاموزید. سیستم‌های امن، کارآمد و مقیاس‌پذیر بسازید.",
    date: "۱۸ اسفند ۱۴۲",
    category: "سمت سرور",
    link: "#",
  },
  {
    id: 4,
    title: "مفاهیم پیشرفته برنامه‌نویسی برنامه‌نویسی وب",
    description:
      "به مفاهیم پیشرفته برنامه‌نویسی وب از برنامه‌نویسی ناهمگام و الگوهای طراحی تا ویژگی‌های ES6+ بپردازید. کدی تمیز، قابل نگهداری و کارآمد بنویسید.",
    date: "۱۵ اسفند ۱۴۲",
    category: "فرانت‌اند",
    link: "#",
  },
];

interface Blog19Props {
  className?: string;
}

const Blog19 = ({ className }: Blog19Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-8 flex flex-wrap items-center justify-between gap-1">
          <h1 className="text-start text-xl font-semibold md:text-xl">
            مطالب مرتبط
          </h1>
          <Button
            variant="outline"
            className="md:h-10 md:px-4 md:py-2"
            size="sm"
          >
            مشاهده همه مطالب
          </Button>
        </div>
        <div className="grid grid-cols-1 gap-16 md:grid-cols-2 lg:grid-cols-4 lg:gap-10">
          {data.map((item) => (
            <a
              key={item.id}
              href={item.link}
              className="flex flex-col gap-2 text-start"
            >
              <span className="text-sm font-medium text-muted-foreground">
                {item.category}
              </span>
              <h3 className="mb-1 text-lg font-semibold">{item.title}</h3>
              <p className="mb-4 text-sm text-muted-foreground">
                {item.description}
              </p>
              <span className="text-sm font-medium text-muted-foreground">
                {item.date}
              </span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Blog19 };