import { ArrowRight, ChevronRight } from "lucide-react";
import React from "react";

import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const data = [
  {
    team: "اکمه",
    logo: "/block-media/shadcnblocks/block/block-1.svg",
    date: "۲ آذر ۱۴۰۳",
    title: "آینده تحول دیجیتال: پذیرش فناوری‌های نوین",
    link: "#",
    categories: [
      {
        name: "فناوری",
        link: "#",
      },
      {
        name: "نوآوری",
        link: "#",
      },
      {
        name: "کسب‌وکار",
        link: "#",
      },
    ],
  },
  {
    team: "شرکت ادونت",
    logo: "/block-media/shadcnblocks/block/block-2.svg",
    date: "۱۷ آبان ۱۴۰۳",
    title: "ساخت راه‌حل‌های پایدار برای چالش‌های فردا",
    link: "#",
    categories: [
      {
        name: "پایداری",
        link: "#",
      },
      { name: "نوآوری", link: "#" },
      { name: "کسب‌وکار", link: "#" },
    ],
  },
  {
    team: "ایس",
    logo: "/block-media/shadcnblocks/block/block-3.svg",
    date: "۹ آبان ۱۴۰۳",
    title: "چگونه فناوری‌های مدرن چشم‌انداز کسب‌وکار را بازمی‌آفرینند",
    link: "#",
    categories: [
      { name: "فناوری", link: "#" },
      { name: "کسب‌وکار", link: "#" },
    ],
  },
];

interface Blog16Props {
  className?: string;
}

const Blog16 = ({ className }: Blog16Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="px-0">
        <h1 className="container text-start text-3xl font-bold lg:text-2xll">
          <span className="text-muted-foreground">وبلاگ</span>
          <br />
          جدیدترین مطالب و به‌روزرسانی‌ها
                          </h1>
        <div className="mt-8">
          <Separator />
          <div className="">
            {data.map((item) => (
              <React.Fragment key={item.title}>
                <div className="container grid grid-cols-1 gap-6 py-8 lg:grid-cols-4">
                  <div className="hidden items-center gap-3 self-start lg:flex">
                    <img
                      src={item.logo}
                      alt={item.team}
                      className="h-auto w-11"
                    />
                    <div className="flex flex-col gap-1 text-start">
                      <span className="font-semibold">{item.team}</span>
                      <span className="text-sm text-muted-foreground">تیم</span>
                    </div>
                  </div>
                  <div className="col-span-2 max-w-xl text-start">
                    <span className="mb-2 text-sm font-medium text-muted-foreground">
                      {item.date}
                      <span className="inline lg:hidden">  {item.team}</span>
                    </span>
                    <h3 className="text-xl font-bold hover:underline lg:text-3xl">
                      <a href={item.link}>{item.title}</a>
                    </h3>
                    <div className="mt-5 flex flex-wrap gap-2">
                      {item.categories.map((category) => (
                        <a
                          key={category.name}
                          href={category.link}
                          className="flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-muted"
                        >
                          {category.name}
                          <ChevronRight className="h-4 w-4 text-muted-foreground rtl:rotate-180" />
                        </a>
                      ))}
                    </div>
                  </div>
                  <Button
                    variant="outline"
                    asChild
                    size="icon"
                    className="ms-auto hidden lg:flex"
                  >
                    <a href={item.link}>
                      <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                      <span className="sr-only">ادامه مطلب</span>
                    </a>
                  </Button>
                </div>
                <Separator />
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Blog16 };