import { ArrowUpRightIcon } from "lucide-react";
import React from "react";

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

interface Blog29Props {
  className?: string;
}

const Blog29 = ({ className }: Blog29Props) => {
  const blogPosts = [
    {
      href: "#",
      date: "۲۵ اسفند ۱۴۲",
      title: "ساخت سیستم طراحی با ری یو آی",
      content:
        "بیاموزید چگونه با کامپوننت‌های ری یو آی یک سیستم طراحی مقیاس‌پذیر بسازید. ترکیب کامپوننت‌ها، تم‌سازی و بهترین روش‌های حفظ یکنواختی در اپلیکیشن را بررسی می‌کنیم. قدرت primitiveهای کتابخانه پایه را با کدبیسی تمیز و قابل نگهداری به کار بگیرید.",
      tags: [
        "سیستم طراحی",
        "Shadcn UI",
        "React",
        "Tailwind CSS",
        "توسعه رابط کاربری",
      ],
    },
    {
      href: "#",
      date: "۲۰ اسفند ۱۴۲",
      title: "ظهور کامپوننت‌های Headless رابط کاربری",
      content:
        "مزایای کامپوننت‌های headless و تأثیر آن‌ها بر توسعه وب را بررسی کنید. کتابخانه‌های محبوب را مقایسه می‌کنیم، ملاحظات دسترس‌پذیری را مطرح می‌کنیم و نحوه ساخت کامپوننت‌های انعطاف‌پذیر و بدون استایل پیش‌فرض را نشان می‌دهیم.",
      tags: [
        "Headless UI",
        "دسترس‌پذیری",
        "معماری کامپوننت",
        "React",
        "توسعه وب",
      ],
    },
    {
      href: "#",
      date: "۱۵ اسفند ۱۴۲",
      title: "بهینه‌سازی کتابخانه کامپوننت برای کارایی",
      content:
        "تکنیک‌های ساخت کتابخانه کامپوننت پرکارایی و مقیاس‌پذیر را کشف کنید. از تقسیم هوشمند بار و tree shaking تا کاهش حجم بسته و بارگذاری هوشمند  بدون قربانی کردن قابلیت‌ها، تجربه‌ای روان ارائه دهید.",
      tags: [
        "کارایی",
        "حجم بسته",
        "Code Splitting",
        "React",
        "کارایی وب",
      ],
    },
  ];

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("bg-background py-16", className)}
    >
      <div className="container">
        <h1 className="mb-10 px-6 text-start text-xl font-bold tracking-tighter text-foreground sm:text-2xll">
          وبلاگ
        </h1>

        <section className="mt-10 space-y-6 md:mt-18">
          {blogPosts.map((post, index) => (
            <React.Fragment key={post.title}>
              <Card className="border-none shadow-none">
                <CardContent>
                  <div className="relative w-full text-start">
                    <p className="text-sm tracking-tight text-muted-foreground">
                      {post.date}
                    </p>

                    <h2 className="mt-2 text-lg font-medium tracking-tight text-foreground md:text-xl">
                      {post.title}
                    </h2>

                    <p className="md:text-md mt-4 text-sm text-muted-foreground md:pe-24 xl:pe-32">
                      {post.content}
                    </p>

                    <div className="mt-4 flex w-9/10 flex-wrap items-center gap-2">
                      {post.tags.map((tag) => (
                        <Badge
                          key={tag}
                          variant="secondary"
                          className="h-6 rounded-md"
                        >
                          <span className="text-md font-medium text-muted-foreground">
                            {tag}
                          </span>
                        </Badge>
                      ))}
                    </div>

                    <a href={post.href}>
                      <Button
                        variant="secondary"
                        className="absolute -bottom-1 -end-3 flex h-10 w-10 items-center justify-center rounded-full transition-all ease-in-out hover:rotate-45 md:bottom-14"
                      >
                        <ArrowUpRightIcon className="rtl:-rotate-90" />
                      </Button>
                    </a>
                  </div>
                </CardContent>
              </Card>

              {index < blogPosts.length - 1 && (
                <Separator className="h-px w-full" />
              )}
            </React.Fragment>
          ))}
        </section>
      </div>
    </section>
  );
};

export { Blog29 };