import { ArrowRight } from "lucide-react";

import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface Post {
  id: string;
  title: string;
  summary: string;
  label: string;
  author: string;
  published: string;
  url: string;
  image: string;
  tags?: string[];
}

interface Blog8Props {
  heading?: string;
  description?: string;
  posts?: Post[];
  className?: string;
}

const Blog8 = ({
  heading = "مطالب وبلاگ",
  description = "جدیدترین آموزش‌ها، تحلیل‌ها و نکات کاربردی درباره توسعه وب، طراحی رابط کاربری و معماری مبتنی بر کامپوننت را بخوانید.",
  posts = [
    {
      id: "post-1",
      title: "ساخت رابط‌های کاربری مدرن با ری یو آی و رابط کاربری",
      summary:
        "در این مقاله با روش‌های ساخت رابط‌های کاربری مدرن با shadcn/ui و React آشنا می‌شوید و بهترین شیوه‌های پیاده‌سازی را یاد می‌گیرید.",
      label: "طراحی وب",
      author: "سارا احمدی",
      published: "۲۶ بهمن ۱۴۲",
      url: "https://ShadcnBlocks",
      image:
        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
      tags: ["طراحی وب", "توسعه رابط"],
    },
    {
      id: "post-2",
      title: "تسلط بر استایل‌دهی مدرن: از مبانی تا تکنیک‌های پیشرفته",
      summary:
        "یاد بگیرید چگونه با Tailwind CSS وب‌سایت‌هایی زیبا، واکنش‌گرا و با کدی تمیز و قابل نگهداری ایجاد کنید.",
      label: "طراحی وب",
      author: "مهدی پارک",
      published: "۳ اسفند ۱۴۲",
      url: "https://ShadcnBlocks",
      image:
        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
      tags: ["طراحی وب", "CSS"],
    },
  ],
  className,
}: Blog8Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-center gap-16">
        <div className="text-center">
          <h2 className="mx-auto mb-6 text-3xl font-semibold text-pretty md:text-xl lg:max-w-3xl">
            {heading}
          </h2>
          <p className="mx-auto max-w-2xl text-muted-foreground md:text-lg">
            {description}
          </p>
        </div>

        <div className="grid gap-y-10 sm:grid-cols-12 sm:gap-y-12 md:gap-y-16 lg:gap-y-20">
          {posts.map((post) => (
            <Card
              key={post.id}
              className="order-last border-0 bg-transparent shadow-none sm:order-first sm:col-span-12 lg:col-span-10 lg:col-start-2"
            >
              <div className="grid gap-y-6 sm:grid-cols-10 sm:gap-x-5 sm:gap-y-0 md:items-center md:gap-x-8 lg:gap-x-12">
                <div className="text-start sm:col-span-5">
                  <div className="mb-4 md:mb-6">
                    <div className="flex flex-wrap gap-3 text-xs tracking-wider text-muted-foreground md:gap-5 lg:gap-6">
                      {post.tags?.map((tag) => (
                        <span key={tag}>{tag}</span>
                      ))}
                    </div>
                  </div>
                  <h3 className="text-xl font-semibold md:text-xl lg:text-3xl">
                    <a
                      href={post.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="hover:underline"
                    >
                      {post.title}
                    </a>
                  </h3>
                  <p className="mt-4 text-muted-foreground md:mt-5">
                    {post.summary}
                  </p>
                  <div className="mt-6 flex items-center gap-4 text-sm md:mt-8">
                    <span className="text-muted-foreground">{post.author}</span>
                    <span className="text-muted-foreground" aria-hidden="true">
                      •
                    </span>
                    <span className="text-muted-foreground">
                      {post.published}
                    </span>
                  </div>
                  <div className="mt-6 flex items-center gap-2 md:mt-8">
                    <a
                      href={post.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="inline-flex items-center font-semibold hover:underline md:text-base"
                    >
                      <span>ادامه مطلب</span>
                      <ArrowRight className="ms-2 size-4 transition-transform rtl:rotate-180" />
                    </a>
                  </div>
                </div>
                <div className="order-first sm:order-last sm:col-span-5">
                  <a
                    href={post.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="block"
                  >
                    <div className="aspect-16/9 overflow-clip rounded-lg border border-border">
                      <img
                        src={post.image}
                        alt={post.title}
                        className="h-full w-full object-cover transition-opacity duration-200 fade-in hover:opacity-70"
                      />
                    </div>
                  </a>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Blog8 };