import { ArrowRight } from "lucide-react";

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

interface DataItem {
  title: string;
  content: string;
}

const DATA: DataItem[] = [
  {
    title: "رایانش ابری",
    content:
      "بررسی الگوهای مقرون‌به‌صرفه مهاجرت به ابر و مدیریت چندابری",
  },
  {
    title: "امنیت سایبری",
    content:
      "پیاده‌سازی چارچوب‌های امنیتی تطبیقی برای نیروهای دورکار",
  },
  {
    title: "اینترنت اشیا",
    content: "کاهش تأخیر در شهرهای هوشمند با رایانش مه",
  },
  {
    title: "بلاک‌چین",
    content:
      "کاربردهای سازمانی فناوری دفتر کل توزیع‌شده در زنجیره تأمین",
  },
];

interface Blog22Props {
  className?: string;
}

const Blog22 = ({ className }: Blog22Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("dark relative bg-background py-32", className)}
    >
      <div className="container">
        <div className="mb-8 text-start">
          <h1 className="text-3xl font-bold text-foreground md:text-xl lg:text-2xll">
            بینش‌های فناوری
          </h1>

          <div className="mt-4 flex flex-wrap items-center justify-between gap-4">
            <span className="mt-2 block text-sm text-muted-foreground md:text-base">
              با فناوری‌های پیشرو که آینده دنیای دیجیتال را شکل می‌دهند آشنا شوید.
                                      </span>
            <Button
              variant="outline"
              className="rounded-full border-foreground text-foreground"
            >
              ادامه مطلب
                                        <ArrowRight className="h-4 w-4 md:h-6 md:w-6 rtl:rotate-180" />
            </Button>
          </div>
        </div>

        <div className="mt-12 grid grid-cols-1 gap-8 md:grid-cols-2 lg:gap-12">
          <div className="mb-4 text-start">
            <img
              className="w-full rounded-lg object-cover"
              src="/block-media/shadcnblocks/block/placeholder-8-wide.svg"
              alt="انقلاب هوش مصنوعی"
            />
            <div className="mt-4">
              <h2 className="text-xl font-bold text-foreground md:text-3xl lg:text-xl">
                هوش مصنوعی نسل بعد: تحول عملیات کسب‌وکار
              </h2>
            </div>
            <div className="mt-6 flex items-center gap-3 md:mt-8 md:gap-4">
              <Avatar className="h-8 w-8 rounded-md md:h-12 md:w-12">
                <AvatarImage
                  src="/block-media/shadcnblocks/block/avatar-1.webp"
                  alt="سارا احمدی"
                />
              </Avatar>
              <span className="text-sm md:text-base">
                <span className="block text-foreground">سارا احمدی</span>
                <span className="text-xs text-muted-foreground md:text-sm">
                  پژوهشگر هوش مصنوعی
                </span>
              </span>
            </div>
          </div>

          <div className="space-y-6 text-foreground md:space-y-8">
            {DATA.map((post) => (
              <div
                key={post.title}
                className="flex items-start gap-4 border-b pb-6 text-start last:border-b-0"
              >
                <div className="w-1/4 shrink-0 md:w-1/5">
                  <img
                    className="rounded-md"
                    src="/block-media/shadcnblocks/block/placeholder-dark-8-wide.svg"
                    alt={post.title}
                  />
                </div>
                <div className="w-3/4 md:w-4/5">
                  <p className="text-sm leading-relaxed md:text-base">
                    {post.content}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Blog22 };