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

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

const blogPosts = [
  {
    id: 1,
    title: "آینده توسعه وب",
    date: "۱۳ آذر ۱۴۰۳",
    description:
      "آخرین روندهای فناوری فرانت‌اند و بک‌اند را بررسی می‌کنیم؛ از ابزارهای کدنویسی مبتنی بر هوش مصنوعی تا فریم‌ورک‌های مدرن.",
    image:
      "/block-media/shadcnblocks/block/photos/nubelson-fernandes-tAJYoec13xk-unsplash.jpg",
    imageAlt: "توسعه‌دهنده در حال کدنویسی",
    href: "#",
  },
  {
    id: 2,
    title: "تسلط بر بهینه‌سازی کارایی رابط کاربری",
    date: "۱۵ آذر ۱۴۰۳",
    description:
      "نگاهی عمیق به memoization، بارگذاری هوشمند و مدیریت state کارآمد برای اپلیکیشن‌های رابط کاربری سریع‌تر.",
    image:
      "/block-media/shadcnblocks/block/photos/jason-goodman-ZJlfUi5rTDU-unsplash.jpg",
    imageAlt: "کد روی صفحه نمایش",
    href: "#",
  },
  {
    id: 3,
    title: "اصول طراحی رابط کاربری/تجربه کاربری برای ۱۴۰۴",
    date: "۲۰ آذر ۱۴۰۳",
    description:
      "استراتژی‌های کلیدی برای ساخت رابط‌هایی شهودی و زیبا که کاربر را جذب می‌کنند و تعامل را در سال پیش رو افزایش می‌دهند.",
    image:
      "/block-media/shadcnblocks/block/photos/studio-republic-fotKKqWNMQ4-unsplash.jpg",
    imageAlt: "طرح‌های رابط کاربری/تجربه کاربری روی کاغذ",
    href: "#",
  },
];

interface Blog30Props {
  className?: string;
}

const Blog30 = ({ className }: Blog30Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container">
        <h1 className="mb-12 max-w-lg text-start font-sans text-2xll font-extrabold tracking-tight text-foreground md:text-2xll">
          محتوای تازه ما را کشف کنید
        </h1>

        <div className="flex flex-col">
          {blogPosts.map((post, index) => (
            <div
              key={post.id}
              className="flex flex-col items-center gap-16 md:flex-row"
            >
              <div className="flex h-80 w-full items-center justify-center overflow-hidden rounded-3xl bg-muted md:w-140">
                <img
                  src={post.image}
                  className="h-full w-full object-cover"
                  alt={post.imageAlt}
                />
              </div>
              <Card className="border-none shadow-none">
                <CardContent className="p-0">
                  <div
                    className={cn(
                      "mb-5 flex h-90 items-start border-b py-10 md:mb-0 lg:gap-32",
                      index == 0 && "md:border-t",
                    )}
                  >
                    <div className="flex h-full w-full flex-col items-start justify-between pe-8 text-start">
                      <h2 className="text-xl font-bold tracking-tight text-foreground md:text-3xl">
                        {post.title}
                      </h2>
                      <p className="mt-2 text-sm font-semibold tracking-wide text-muted-foreground">
                        {post.date}
                      </p>
                    </div>
                    <div className="flex h-full w-full flex-col items-start justify-between gap-6 text-start">
                      <p className="text-lg leading-relaxed font-normal tracking-tight text-muted-foreground md:text-xl">
                        {post.description}
                      </p>
                      <Button
                        variant="ghost"
                        className="inline-flex items-center justify-center gap-4 px-0 text-primary transition-all ease-in-out hover:gap-6 hover:text-accent-foreground"
                        asChild
                      >
                        <a
                          href={post.href}
                          className="inline-flex items-center gap-4 text-lg font-semibold tracking-tight"
                        >
                          ادامه مطلب
                                                                    <ArrowRightIcon className="rtl:rotate-180" />
                        </a>
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Blog30 };