import { ArrowRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
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;
}

interface Blog24Props {
  tagline: string;
  heading: string;
  description: string;
  buttonText: string;
  buttonUrl: string;
  posts: Post[];
  className?: string;
}

const Blog24 = ({
  tagline = "آخرین به‌روزرسانی‌ها",
  heading = "مطالب وبلاگ",
  description = "جدیدترین روندها، نکات و بهترین روش‌های توسعه وب مدرن را دنبال کنید؛ از طراحی رابط کاربری تا سیستم‌های طراحی، همراه با آموزش‌ها و تجربه‌های متخصصان.",
  buttonText = "مشاهده همه مطالب",
  buttonUrl = "https://ShadcnBlocks",
  posts = [
    {
      id: "post-1",
      title: "شروع کار با کامپوننت‌های ری یو آی",
      summary:
        "یاد بگیرید چگونه کامپوننت‌های shadcn/ui را در پروژه‌های Next.js به‌سرعت پیاده‌سازی و سفارشی‌سازی کنید و با بهترین روش‌های ساخت رابط‌های کاربری مدرن آشنا شوید.",
      label: "آموزش",
      author: "سارا احمدی",
      published: "۱۱ دی ۱۴۲",
      url: "https://ShadcnBlocks",
      image:
        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    },
    {
      id: "post-2",
      title: "ساخت وب‌اپلیکیشن‌های دسترس‌پذیر",
      summary:
        "با کامپوننت‌های دسترس‌پذیر shadcn/ui تجربه‌های وب فراگیر بسازید. نکات عملی برای برچسب‌های ARIA، ناوبری با کیبورد و HTML معنایی را بیاموزید.",
      label: "دسترس‌پذیری",
      author: "محمد رضایی",
      published: "۱۱ دی ۱۴۲",
      url: "https://ShadcnBlocks",
      image:
        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    },
    {
      id: "post-3",
      title: "سیستم‌های طراحی مدرن با استایل‌دهی مدرن",
      summary:
        "ساخت سیستم‌های طراحی مقیاس‌پذیر با Tailwind CSS و shadcn/ui را بررسی کنید. چگونه یکنواختی را حفظ کنید و در عین حال کتابخانه‌ای انعطاف‌پذیر و قابل نگهداری بسازید.",
      label: "سیستم طراحی",
      author: "اما حسینی",
      published: "۱۱ دی ۱۴۲",
      url: "https://ShadcnBlocks",
      image:
        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    },
  ],
  className,
}: Blog24Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto">
        <div className="mx-auto max-w-3xl text-center">
          <Badge variant="secondary" className="mb-6">
            {tagline}
          </Badge>
          <h2 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-2xll lg:mb-6">
            {heading}
          </h2>
          <p className="mb-12 text-muted-foreground md:text-base lg:text-lg">
            {description}
          </p>
        </div>

        <div className="mx-auto max-w-5xl space-y-12">
          {posts.map((post) => (
            <Card
              key={post.id}
              className="overflow-hidden border-0 bg-transparent shadow-none"
            >
              <div className="flex flex-col gap-6 sm:flex-row">
                <div className="shrink-0">
                  <a
                    href={post.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="block transition-opacity duration-200 hover:opacity-90"
                  >
                    <img
                      src={post.image}
                      alt={post.title}
                      className="aspect-16/9 w-full rounded-lg object-cover object-center sm:w-[260px]"
                    />
                  </a>
                </div>
                <div className="flex-1 space-y-3 text-start">
                  <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
                    <Badge variant="secondary">{post.label}</Badge>
                    <span>{post.author}</span>
                    <span>{post.published}</span>
                  </div>
                  <h3 className="text-xl leading-tight font-bold lg:text-xl">
                    <a
                      href={post.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="hover:underline"
                    >
                      {post.title}
                    </a>
                  </h3>
                  <p className="text-base text-muted-foreground">
                    {post.summary}
                  </p>
                  <a
                    href={post.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center text-primary hover:underline"
                  >
                    ادامه مطلب
                                                  <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
                  </a>
                </div>
              </div>
            </Card>
          ))}
        </div>

        <div className="mt-16 text-center">
          <Button
            variant="outline"
            size="lg"
            className="w-full sm:w-auto"
            asChild
          >
            <a href={buttonUrl} target="_blank" rel="noopener noreferrer">
              {buttonText}
              <ArrowRight className="ms-2 size-4 rtl:rotate-180" />
            </a>
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Blog24 };