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

type Category = "فناوری" | "کسب‌وکار" | "سلامت و تندرستی" | "بهره‌وری";

type Post = {
  title: string;
  category: Category;
  description: string;
  image: string;
};

const posts: Post[] = [
  {
    title: "آینده هوش مصنوعی در فناوری امروز",
    category: "فناوری",
    description:
      "ببینید هوش مصنوعی چگونه صنایع مختلف را دگرگون می‌کند و با پیشرفته‌ترین دستاوردهای هوش مصنوعی در دنیای فناوری آشنا شوید.",
    image:
      "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    title: "استراتژی‌های رشد مؤثر کسب‌وکار در ۱۴۰۴",
    category: "کسب‌وکار",
    description:
      "استراتژی‌های اثبات‌شده برای رشد کسب‌وکار و ماندن رقابتی در بازاری که مدام در حال تغییر است.",
    image:
      "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    title: "برترین روندهای تندرستی برای بهبود سلامت در ۱۴۰۴",
    category: "سلامت و تندرستی",
    description:
      "روندهای برجسته تندرستی که به شما کمک می‌کنند سبک زندگی سالم‌تر و متعادل‌تری داشته باشید.",
    image:
      "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
  {
    title: "افزایش بهره‌وری با ابزارها و تکنیک‌های هوشمند",
    category: "بهره‌وری",
    description:
      "بیاموزید چگونه با جدیدترین ابزارها و تکنیک‌ها بهره‌وری خود را افزایش دهید و زمان را بهتر مدیریت کنید.",
    image:
      "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
];

interface Blog14Props {
  className?: string;
}

const Blog14 = ({ className }: Blog14Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-16 text-center">
          <h1 className="text-2xll font-medium md:text-2xll">
            بینش‌ها و تازه‌ترین روندها
                                </h1>
          <p className="mx-auto mt-4 max-w-xl text-lg text-muted-foreground">
            با جدیدترین تحلیل‌ها، روندها و نکات کاربردی همراه باشید و همیشه یک گام جلوتر حرکت کنید.
                                </p>
        </div>
        <div className="mx-auto max-w-7xl">
          <div className="my-16 grid grid-cols-1 items-center gap-8 md:grid-cols-2 lg:gap-16">
            <img
              src={posts[0].image}
              alt={posts[0].title}
              className="aspect-video rounded-lg object-cover"
            />
            <div className="flex flex-col items-start gap-4 text-start">
              <Badge variant="secondary" className="shrink">
                {posts[0].category}
              </Badge>
              <h2 className="text-xl font-semibold text-balance md:max-w-lg lg:text-3xl">
                {posts[0].title}
              </h2>
              <p className="text-muted-foreground md:max-w-lg">
                {posts[0].description}
              </p>
            </div>
          </div>
          <p className="text-start text-xl font-medium md:text-3xl">
            مطالب پربازدید
          </p>
          <div className="mt-8 grid grid-cols-1 gap-10 md:grid-cols-3 md:gap-6">
            {posts.slice(1).map((post) => (
              <div
                key={post.title}
                className="flex flex-col items-start gap-4 text-start"
              >
                <img
                  src={post.image}
                  alt={post.title}
                  className="aspect-video rounded-lg object-cover"
                />
                <Badge variant="secondary" className="shrink">
                  {post.category}
                </Badge>
                <h3 className="text-xl font-semibold text-balance md:max-w-md">
                  {post.title}
                </h3>
                <p className="text-muted-foreground md:max-w-md">
                  {post.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Blog14 };