import { ArrowRight } from "lucide-react";
import { Fragment } from "react";

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

const news = [
  {
    title:
      "پلتفرم هوش مصنوعی TechFlow اکنون در Azure Marketplace در دسترس است",
    category: "همکاری",
    avatar:
      "/block-media/shadcnblocks/block/avatar-1.webp",
    date: "۲۵ خرداد ۱۴۰۳",
    link: "#",
  },
  {
    title: "CodeSphere: معرفی جدیدترین ابزار توسعه ما",
    category: "بیانیه رسانه‌ای",
    avatar:
      "/block-media/shadcnblocks/block/avatar-2.webp",
    date: "۲۰ خرداد ۱۴۰۳",
    link: "#",
  },
  {
    title:
      "DataViz و CloudNative همکاری در ابزارهای تحلیل نسل بعد را اعلام کردند",
    category: "همکاری",
    avatar:
      "/block-media/shadcnblocks/block/avatar-3.webp",
    date: "۸ خرداد ۱۴۰۳",
    link: "#",
  },
  {
    title:
      "QuantumByte پلتفرم رایانش لبه EdgeCompute را معرفی کرد",
    category: "اخبار",
    avatar:
      "/block-media/shadcnblocks/block/avatar-4.webp",
    date: "۲۳ اردیبهشت ۱۴۰۳",
    link: "#",
  },
  {
    title: "در نشست جهانی DevCon ۲۲۴ در برلین همراه ما باشید",
    category: "بیانیه رسانه‌ای",
    avatar:
      "/block-media/shadcnblocks/block/avatar-5.webp",
    date: "۱۶ اردیبهشت ۱۴۰۳",
    link: "#",
  },
];

interface Resources4Props {
  className?: string;
}

const Resources4 = ({ className }: Resources4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-start justify-between gap-5 lg:flex-row lg:gap-2">
          <div className="flex w-full max-w-56 items-center gap-3 text-start text-sm">
            <span className="size-2 rounded-full bg-primary"></span>
            منابع
          </div>
          <div className="flex-1 text-start">
            <h2 className="text-3xl">
              در جریان بمانید؟
              <br />
              <span className="text-primary/50">
                آخرین به‌روزرسانی‌های ما را کشف کنید.
              </span>
            </h2>
            <div className="mt-14">
              <Separator />
              {news.map((item, idx) => (
                <Fragment key={idx}>
                  <a
                    href={item.link}
                    className="group flex flex-col justify-between gap-10 py-6 text-start transition-all duration-400 lg:flex-row lg:items-center lg:hover:bg-muted"
                  >
                    <div className="flex items-center gap-2 text-lg transition-all duration-400 lg:group-hover:translate-x-8 rtl:lg:group-hover:-translate-x-8">
                      <p className="inline text-pretty text-primary">
                        {item.title}
                        <ArrowRight className="ms-2 inline size-4 shrink-0 opacity-0 transition-all duration-400 rtl:rotate-180 lg:group-hover:text-primary lg:group-hover:opacity-100" />
                      </p>
                    </div>
                    <div className="flex w-full items-center justify-between transition-all duration-400 lg:max-w-72 lg:group-hover:-translate-x-4 rtl:lg:group-hover:translate-x-4 xl:max-w-80">
                      <p className="text-xs text-muted-foreground">
                        {item.category}
                      </p>
                      <div className="flex items-center gap-2">
                        <Avatar className="size-7 rounded-full border border-border">
                          <AvatarImage src={item.avatar} />
                        </Avatar>
                        <time className="text-xs text-muted-foreground">
                          {item.date}
                        </time>
                      </div>
                    </div>
                  </a>
                  <Separator />
                </Fragment>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Resources4 };