import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const posts = [
  {
    id: "post-1",
    title: "آینده توسعه وب: گام بعدی چیست؟",
    summary:
      "آخرین روندهای توسعه وب را بررسی کنید؛ از ابزارهای مبتنی بر هوش مصنوعی تا فریم‌ورک‌هایی که نحوه ساخت وب را دگرگون می‌کنند. بدانید توسعه‌دهندگان برای جلو ماندن به چه چیزهایی نیاز دارند.",
    label: "توسعه وب",
    author: "سارا احمدی",
    published: "۲۵ دی ۱۴۲",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    avatarFallback: "سا",
  },
  {
    id: "post-2",
    title: "ساخت اتصال‌های مقیاس‌پذیر با الگوهای معماری مدرن",
    summary:
      "با میکروسرویس‌ها، GraphQL و معماری‌های رویدادمحور آشنا شوید؛ همان رویکردهایی که موفق‌ترین اپلیکیشن‌های امروز را پشتیبانی می‌کنند. نکات عملی برای ساخت APIهای پایدار.",
    label: "سمت سرور",
    author: "محمد رضایی",
    published: "۲۲ دی ۱۴۲",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
    avatarFallback: "مر",
  },
  {
    id: "post-3",
    title: "سیستم‌های طراحی: یکپارچگی در مقیاس بزرگ",
    summary:
      "ببینید شرکت‌های پیشرو چگونه سیستم‌های طراحی را پیاده می‌کنند تا یکنواختی بصری در محصولات حفظ شود و در عین حال توسعه و نوآوری سریع‌تر پیش برود.",
    label: "طراحی",
    author: "اما حسینی",
    published: "۲۰ دی ۱۴۲",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
    avatarFallback: "اح",
  },
];

interface Blog4Props {
  className?: string;
}

const Blog4 = ({ className }: Blog4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-8 md:mb-14 lg:mb-16">
          <div className="flex items-start justify-between gap-8">
            <div>
              <h2 className="mb-4 w-full text-start text-xl font-medium md:mb-5 md:text-2xll lg:mb-6 lg:text-2xll">
                وبلاگ
              </h2>
            </div>
          </div>
          <p className="text-start text-muted-foreground">
            آموزش‌ها، تحلیل‌ها و تازه‌ترین مطالب درباره توسعه نرم‌افزار مدرن
                                </p>
        </div>
        <div className="grid gap-x-4 gap-y-8 md:grid-cols-2 lg:gap-x-6 lg:gap-y-12 2xl:grid-cols-3">
          {posts.map((post) => (
            <a key={post.id} href={post.href} className="group flex flex-col">
              <div className="mb-4 flex overflow-clip rounded-xl md:mb-5">
                <div className="transition-opacity duration-300 group-hover:opacity-80">
                  <img
                    src={post.image}
                    alt={post.title}
                    className="aspect-3/2 h-full w-full object-cover object-center"
                  />
                </div>
              </div>

              <div>
                <Badge variant="secondary">{post.label}</Badge>
              </div>
              <div className="mb-2 line-clamp-3 pt-4 text-start text-lg font-medium break-words md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-3xl">
                {post.title}
              </div>
              <div className="mb-4 line-clamp-2 text-start text-sm text-muted-foreground md:mb-5 md:text-base">
                {post.summary}
              </div>
              <div className="flex items-center gap-2">
                <Avatar className="size-12">
                  <AvatarImage src="/block-media/shadcnblocks/block/avatar-1.webp" />
                  <AvatarFallback>{post.avatarFallback}</AvatarFallback>
                </Avatar>
                <div className="flex flex-col gap-px text-start">
                  <span className="text-xs font-medium">{post.author}</span>
                  <span className="text-xs text-muted-foreground">
                    {post.published}
                  </span>
                </div>
              </div>
            </a>
          ))}
        </div>
        <div className="mt-8 flex flex-col items-center py-2 md:hidden">
          <Button className="w-full sm:w-fit">مشاهده همه مطالب</Button>
        </div>
      </div>
    </section>
  );
};

export { Blog4 };