import { Calendar, ChevronRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const posts = [
  {
    title: "چگونه برند و کسب‌وکار موفقی بسازیم",
    category: "کسب‌وکار",
    date: "۲ مهر ۱۴۰۳",
    image:
      "/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
    href: "#",
  },
  {
    title: "تفاوت رابط کاربری و تجربه کاربری",
    category: "طراحی",
    date: "۱۸ فروردین ۱۴۰۳",
    image:
      "/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg",
    href: "#",
  },
  {
    title: "بهینه‌سازی وب‌سایت برای سئو و ترافیک بیشتر",
    category: "بازاریابی",
    date: "۱۰ شهریور ۱۴۰۳",
    image:
      "/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
    href: "#",
  },
];

interface Blog13Props {
  className?: string;
}

const Blog13 = ({ className }: Blog13Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-6 text-center">
          <Badge variant="outline">مقالات</Badge>
          <h1 className="text-xl font-semibold text-balance">
            جدیدترین روندها را کشف کنید
          </h1>
          <p className="text-muted-foreground">
            در وبلاگ ما جدیدترین مقالات، آموزش‌ها و ایده‌های کاربردی را برای رشد کسب‌وکار و توسعه مهارت‌های خود دنبال کنید.
                                </p>
          <a href="#" className="flex items-center gap-1 text-sm font-semibold">
            مشاهده همه مطالب
            <ChevronRight className="h-full w-4 rtl:rotate-180" />
          </a>
        </div>
        <div className="mt-20 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {posts.map((post) => (
            <div key={post.title} className="flex flex-col">
              <div className="relative">
                <img
                  src={post.image}
                  alt={post.title}
                  className="aspect-video w-full rounded-lg object-cover"
                />
                <Badge
                  variant="secondary"
                  className="absolute top-4 end-4 bg-background/70 px-3 py-1 text-sm backdrop-blur-sm"
                >
                  {post.category}
                </Badge>
              </div>
              <div className="flex h-full flex-col justify-between p-4 text-start">
                <h2 className="mb-5 text-xl font-semibold">{post.title}</h2>
                <div className="flex justify-between gap-6 text-sm">
                  <span className="flex items-center gap-1 text-muted-foreground">
                    <Calendar className="h-4 w-4 shrink-0" />
                    {post.date}
                  </span>
                  <a href={post.href} className="flex shrink-0 items-center gap-1">
                    ادامه مطلب
                                                  <ChevronRight className="h-full w-3 rtl:rotate-180" />
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Blog13 };