import { AspectRatio } from "@/components/ui/aspect-ratio";
import { cn } from "@/lib/utils";

interface post {
  thumbnail?: string;
  title: string;
  summary?: string;
  author: {
    name: string;
    link: string;
  };
  link: string;
  date: string;
  className?: string;
}

const TOP_POST: post = {
  thumbnail:
    "/block-media/shadcnblocks/block/placeholder-1.svg",
  title: "آینده نوآوری در هوش مصنوعی",
  summary:
    "بررسی کنید فناوری‌های نوین هوش مصنوعی چگونه فرایندهای کسب‌وکار را متحول کرده، بهره‌وری را افزایش می‌دهند و فرصت‌های تازه‌ای برای رشد ایجاد می‌کنند.",
  author: {
    name: "کریستین بونهنر",
    link: "#",
  },
  link: "#",
  date: "۲۵ اسفند ۱۴۲",
};

const POSTS: Array<post> = [
  {
    title:
      "هوش مصنوعی برای بازاریاب‌ها: جدیدترین ابزارها و چگونگی تسلط بر آن‌ها",
    link: "#",
    author: {
      name: "کریستین بونهنر",
      link: "#",
    },
    date: "۲۲ اسفند ۱۴۲",
  },
  {
    title: "۶ ابزار هوش مصنوعی برای ساده‌سازی و تسریع تولید پادکست",
    link: "#",
    author: {
      name: "کریستین بونهنر",
      link: "#",
    },
    date: "۲۰ اسفند ۱۴۲",
  },
  {
    title: "اگر رشد کانال یوتیوب شما متوقف شده، این را امتحان کنید",
    link: "#",
    author: {
      name: "کریستین بونهنر",
      link: "#",
    },
    date: "۱۸ اسفند ۱۴۲",
  },
];

const Post = ({ title, author, date, link, className }: post) => {
  return (
    <div
      className={cn(
        "flex w-full flex-col gap-[1.875rem] border-b py-10 text-start lg:max-w-[28.125rem]",
        className,
      )}
    >
      <a
        href={link}
        className="group inline-block text-xl leading-[1.22] font-semibold hover:underline"
      >
        {title}
      </a>
      <div className="flex w-full flex-col gap-5">
        <div className="flex flex-wrap items-center gap-2">
          <a
            className="text-sm font-medium text-foreground/60 hover:underline"
            href={author.link}
          >
            مقاله {author.name}
          </a>
          <span className="text-sm text-muted-foreground" aria-hidden="true">
            •
          </span>
          <span className="text-sm text-muted-foreground">{date}</span>
        </div>
      </div>
    </div>
  );
};

interface Blog26Props {
  className?: string;
}

const Blog26 = ({ className }: Blog26Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-10 grid grid-cols-[minmax(18.75rem,1fr)] items-start justify-start gap-2.5 md:mb-20 lg:mb-24 lg:grid-cols-[minmax(18.75rem,1fr)_minmax(12.5rem,28.125rem)] lg:gap-20">
          <h1 className="text-start text-2xll leading-[1.22] font-bold md:text-[5rem] md:font-semibold lg:text-[7.5rem]">
            وبلاگ
          </h1>
          <div className="pb-5 text-start">
            <p className="text-base text-foreground sm:text-lg">
              <span className="text-muted-foreground">
                جایی که ایده‌های نو به واقعیت تبدیل می‌شوند
                                            </span>
              <br />
              <strong>وبلاگ شرکت</strong>
            </p>
            <div className="mt-6 rounded-lg border p-4">
              <div className="flex items-center gap-3">
                <img
                  src="/block-media/shadcnblocks/block/portraits/christian-buehner-DItYlc26zVI-unsplash 1.jpg"
                  alt="تصویر کریستین بونهنر"
                  className="h-12 w-12 rounded-full object-cover"
                />
                <div>
                  <p className="text-sm font-medium">کریستین بونهنر</p>
                  <p className="text-xs text-muted-foreground">نویسنده محتوا</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="grid w-full grid-cols-[minmax(18.75rem,1fr)] gap-20 pb-[6.25rem] lg:grid-cols-[minmax(18.75rem,1fr)_minmax(12.5rem,28.125rem)]">
          <div className="text-start">
            <div className="flex flex-col gap-[1.875rem]">
              <a
                href={TOP_POST.link}
                className="group flex aspect-[1.736111111] w-full overflow-hidden rounded-[0.625rem]"
              >
                <AspectRatio
                  ratio={1.736111111}
                  className="m-auto overflow-hidden"
                >
                  <img
                    src={TOP_POST.thumbnail}
                    alt={TOP_POST.title}
                    className="block size-full object-cover object-center"
                  />
                </AspectRatio>
              </a>
              <div className="flex w-full flex-col gap-5">
                <a
                  href={TOP_POST.link}
                  className="group inline-block text-xl leading-[1.22] font-semibold hover:underline md:text-xl"
                >
                  {TOP_POST.title}
                </a>
                <p className="text-lg text-foreground">{TOP_POST.summary}</p>
              </div>
              <div className="flex w-full flex-col gap-5">
                <div className="flex flex-wrap items-center gap-2">
                  <a
                    className="text-sm font-medium text-foreground/60 hover:underline"
                    href={TOP_POST.author.link}
                  >
                    مقاله {TOP_POST.author.name}
                  </a>
                  <span className="text-sm text-muted-foreground" aria-hidden="true">
                    •
                  </span>
                  <span className="text-sm text-muted-foreground">
                    {TOP_POST.date}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div className="flex flex-col gap-10 text-start">
            <div className="text-2xll leading-[1.2] font-semibold">جدیدترین</div>
            <div className="-mt-10 flex flex-col">
              {POSTS.map((post) => (
                <Post {...post} key={post.title} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Blog26 };