import { ArrowRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface FeaturedPostData {
  title: string;
  imageUrl: string;
  link: string;
}

const FEATURED_POST: FeaturedPostData = {
  title: "ساخت بلاک‌های قابل استفاده مجدد رابط کاربری برای مبتدیان",
  imageUrl:
    "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
  link: "#",
};

const ARTICLES = [
  {
    date: "۱۳ دی ۱۴۰۳",
    category: "سیستم طراحی",
    link: "#",
    title: "تسلط بر الگوهای بلاک رابط کاربری قابل استفاده مجدد در اپلیکیشن‌های رابط کاربری",
  },
  {
    date: "۱۴ دی ۱۴۰۳",
    category: "بهترین روش‌ها",
    link: "#",
    title: "۱۰ اشتباه رایج که هنگام ساخت کامپوننت‌های رابط کاربری باید از آن‌ها دوری کنید",
  },
  {
    date: "۱۵ دی ۱۴۰۳",
    category: "کامپوننت‌ها",
    link: "#",
    title: "راهنمای گام‌به‌گام ساخت بلاک‌های کارت انعطاف‌پذیر",
  },
  {
    date: "۱۶ دی ۱۴۰۳",
    category: "دسترس‌پذیری",
    link: "#",
    title: "تضمین دسترس‌پذیری در کامپوننت‌های بلاک رابط کاربری سفارشی",
  },
  {
    date: "۱۷ دی ۱۴۰۳",
    category: "کارایی",
    link: "#",
    title: "چگونه بلاک‌های رابط کاربری را برای سرعت و کارایی بهینه کنیم",
  },
  {
    date: "۱۸ دی ۱۴۰۳",
    category: "فریم‌ورک‌ها",
    link: "#",
    title: "ساخت بلاک‌های رابط کاربری مقیاس‌پذیر با استایل‌دهی مدرن و Headless رابط کاربری",
  },
  {
    date: "۱۹ دی ۱۴۰۳",
    category: "سیستم طراحی",
    link: "#",
    title: "ایجاد بلاک‌های رابط کاربری یکپارچه در یک سیستم طراحی مشترک",
  },
  {
    date: "۲۰ دی ۱۴۰۳",
    category: "React",
    link: "#",
    title: "چرا رابط کاربری بهترین ابزار برای بلاک‌های رابط کاربری مبتنی بر کامپوننت است",
  },
];

interface Resources3Props {
  className?: string;
}

const Resources3 = ({ className }: Resources3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <FeaturedPost {...FEATURED_POST} />
        <div className="flex w-full flex-col gap-4">
          <h2 className="mt-16 text-start text-xl font-semibold">منابع</h2>
          <div>
            {ARTICLES.map((article, index) => (
              <a
                href={article.link}
                key={index}
                className="block w-full hover:bg-foreground/10"
              >
                <div className="flex flex-col items-baseline justify-between gap-2 border-t py-6 text-start text-foreground md:flex-row">
                  <div className="basis-1/4 font-medium">{article.date}</div>
                  <div className="basis-1/4">{article.category}</div>
                  <div className="basis-1/2 text-muted-foreground">
                    {article.title}
                  </div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const FeaturedPost = ({ title, imageUrl, link }: FeaturedPostData) => {
  return (
    <div className="flex flex-col justify-between gap-10 rounded-2xl bg-muted p-10 xl:flex-row">
      <div className="basis-full text-start lg:basis-1/2">
        <div className="flex flex-col gap-5">
          <Badge variant="outline" className="bg-background">
            منبع ویژه
          </Badge>
          <h2 className="text-xl leading-[1.2] font-normal text-foreground md:text-[2.5rem] xl:text-[3.125rem]">
            {title}
          </h2>
          <div>
            <Button
              asChild
              className="group relative mt-5 !px-6 transition-all hover:!ps-8 hover:!pe-4"
            >
              <a href={link}>
                بیشتر بخوانید
                <ArrowRight className="absolute top-1/2 end-4 -translate-y-1/2 opacity-0 transition-all group-hover:translate-x-1.5 group-hover:opacity-100 rtl:rotate-180 rtl:group-hover:-translate-x-1.5" />
              </a>
            </Button>
          </div>
        </div>
      </div>
      <div className="basis-full lg:basis-1/2">
        <div className="mx-auto aspect-[1.782729805] w-full max-w-[40rem] overflow-hidden rounded-2xl">
          <img
            src={imageUrl}
            alt={title}
            className="block size-full object-cover object-center"
          />
        </div>
      </div>
    </div>
  );
};

export { Resources3 };