"use client";

import { cn } from "@/lib/utils";

interface Post {
  date: string;
  author: string;
  title: string;
  image: string;
  link: string;
  description: string;
}

const posts: Post[] = [
  {
    date: "۲۶ خرداد ۱۴۰۳",
    author: "علی احمدی",
    title: "آینده هوش مصنوعی: چگونه یادگیری ماشین صنایع را متحول می‌کند",
    image:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
    link: "#",
    description:
      "ببینید هوش مصنوعی و یادگیری ماشین چگونه از بهداشت تا تولید را دگرگون می‌کنند و با جدیدترین نوآوری‌هایی که آینده ما را شکل می‌دهند آشنا شوید.",
  },
  {
    date: "۲۳ خرداد ۱۴۰۳",
    author: "مایا پاتیل",
    title: "اصول طراحی مینیمال: کمتر، بیشتر در تجربه و رابط کاربری مدرن",
    image:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
    link: "#",
    description:
      "اصول طراحی مینیمال را بشناسید و ببینید چگونه رابط‌هایی شهودی‌تر و کاربرپسندتر می‌سازند.",
  },
  {
    date: "۲۱ خرداد ۱۴۰۳",
    author: "داوود چین",
    title: "انقلاب دورکاری: چگونه شرکت‌ها با وضعیت جدید سازگار می‌شوند",
    image:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
    link: "#",
    description:
      "مزایا و چالش‌های دورکاری و روش‌های سازگاری شرکت‌ها با این الگوی جدید کار را بررسی کنید.",
  },
  {
    date: "۱۹ خرداد ۱۴۰۳",
    author: "سارا ویلیامز",
    title: "ساخت اپلیکیشن‌های مقیاس‌پذیر با معماری میکروسرویس",
    image:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
    link: "#",
    description:
      "بیاموزید معماری میکروسرویس چگونه به ساخت اپلیکیشن‌های مقیاس‌پذیر و قابل نگهداری کمک می‌کند.",
  },
  {
    date: "۱۶ خرداد ۱۴۰۳",
    author: "محمد رودریگز",
    title: "استراتژی‌های بازاریابی محتوا برای ترافیک ارگانیک در ۱۴۰۳",
    image:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
    link: "#",
    description:
      "استراتژی‌های مؤثر بازاریابی محتوا را کشف کنید تا ترافیک ارگانیک بگیرید و مخاطبان خود را در ۱۴۰۳ رشد دهید.",
  },
];

interface Blog28Props {
  className?: string;
}

const Blog28 = ({ className }: Blog28Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h1 className="mb-12 text-center text-xl font-medium md:text-2xll">
          جدیدترین وبلاگ فناوری
        </h1>

        <div className="xs:grid-cols-1 mt-24 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <div className="relative md:row-span-2 lg:col-span-2">
            <a
              href={posts[0].link}
              className="block h-fit rounded-lg p-3 text-start md:top-0"
            >
              <img
                src={posts[0].image}
                alt={posts[0].title}
                className="h-48 w-full rounded-lg object-cover hover:opacity-80 md:h-80 lg:h-96"
              />
              <div className="mt-5">
                <div className="mb-2.5 flex flex-wrap items-center gap-1 text-sm text-muted-foreground">
                  <time>{posts[0].date}</time>
                  <span aria-hidden="true">·</span>
                  <span>{posts[0].author}</span>
                </div>
                <h2 className="text-lg md:text-3xl lg:text-xl">
                  {posts[0].title}
                </h2>
                <p className="mt-4 text-muted-foreground">
                  {posts[0].description}
                </p>
              </div>
            </a>
          </div>
          {posts.slice(1).map((post) => (
            <a
              key={post.title}
              href={post.link}
              className="rounded-lg p-3 text-start"
            >
              <img
                src={post.image}
                alt={post.title}
                className="h-48 w-full rounded-lg object-cover hover:opacity-80"
              />
              <div className="mt-5">
                <div className="mb-2.5 flex flex-wrap items-center gap-1 text-sm text-muted-foreground">
                  <time>{post.date}</time>
                  <span aria-hidden="true">·</span>
                  <span>{post.author}</span>
                </div>
                <h3 className="text-lg">{post.title}</h3>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Blog28 };