import { ArrowRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} 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 Blog7Props {
  tagline: string;
  heading: string;
  description: string;
  buttonText: string;
  buttonUrl: string;
  posts: Post[];
  className?: string;
}

const Blog7 = ({
  tagline = "آخرین به‌روزرسانی‌ها",
  heading = "وبلاگ",
  description = "جدیدترین روندها، نکات و بهترین روش‌ها در توسعه وب مدرن را کشف کنید. از کامپوننت‌های رابط کاربری تا سیستم‌های طراحی، با بینش‌های کارشناسان ما به‌روز بمانید.",
  posts = [
    {
      id: "post-1",
      title: "شروع کار با کامپوننت‌های ری یو آی",
      summary:
        "یاد بگیرید چطور کامپوننت‌های shadcn/ui را سریع در پروژه‌های Next.js یکپارچه و سفارشی کنید. نصب، تم‌سازی و بهترین روش‌ها برای ساخت رابط‌های مدرن را پوشش می‌دهیم.",
      label: "آموزش",
      author: "سارا احمدی",
      published: "۱۱ دی ۱۴۲",
      url: "https://www.ShadcnBlocks",
      image:
        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    },
    {
      id: "post-2",
      title: "ساخت وب‌اپلیکیشن‌های دسترس‌پذیر",
      summary:
        "با کامپوننت‌های دسترس‌پذیر shadcn/ui تجربه‌های وب فراگیر بسازید. نکات عملی برای برچسب‌های ARIA، ناوبری با کیبورد و HTML معنایی را بیاموزید.",
      label: "دسترس‌پذیری",
      author: "محمد رضایی",
      published: "۱۱ دی ۱۴۲",
      url: "#",
      image:
        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    },
    {
      id: "post-3",
      title: "سیستم‌های طراحی مدرن با استایل‌دهی مدرن",
      summary:
        "ساخت سیستم‌های طراحی مقیاس‌پذیر با Tailwind CSS و shadcn/ui را بررسی کنید. چگونه یکنواختی را حفظ کنید و در عین حال کتابخانه‌ای انعطاف‌پذیر و قابل نگهداری بسازید.",
      label: "سیستم طراحی",
      author: "اما حسینی",
      published: "۱۱ دی ۱۴۲",
      url: "#",
      image:
        "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
    },
  ],
  className,
}: Blog7Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container mx-auto flex flex-col items-center gap-8">
        <div className="text-center">
          <Badge variant="secondary" className="mb-6">
            {tagline}
          </Badge>
          <h2 className="mb-3 text-2xll tracking-tighter text-pretty md:mb-4 lg:mb-6 lg:max-w-3xl lg:text-2xll">
            {heading}
          </h2>
          <p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg">
            {description}
          </p>
        </div>
        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
          {posts.map((post) => (
            <Card
              key={post.id}
              className="grid grid-rows-[auto_auto_1fr_auto] overflow-hidden pt-0"
            >
              <div className="aspect-video w-full">
                <a
                  href={post.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="transition-opacity duration-200 fade-in hover:opacity-70"
                >
                  <img
                    src={post.image}
                    alt={post.title}
                    className="h-full w-full object-cover object-center"
                  />
                </a>
              </div>
              <CardHeader className="text-start">
                <h3 className="text-xl hover:underline md:text-xl">
                  <a href={post.url} target="_blank" rel="noopener noreferrer">
                    {post.title}
                  </a>
                </h3>
                <p className="mt-2 text-sm font-semibold text-foreground/80">
                  {post.author}
                  <span aria-hidden="true"> · </span>
                  {post.published}
                </p>
              </CardHeader>
              <CardContent className="text-start">
                <p className="leading-relaxed text-muted-foreground">
                  {post.summary}
                </p>
              </CardContent>
              <CardFooter className="text-start">
                <a
                  href={post.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center text-muted-foreground hover:underline"
                >
                  ادامه مطلب
                                            <ArrowRight className="ms-1 size-4 rtl:rotate-180" />
                </a>
              </CardFooter>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Blog7 };