import { Badge } from "@/components/ui/badge";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

const filters = [
  {
    name: "دسته‌بندی‌ها",
    values: ["همه", "فناوری", "طراحی", "بازاریابی", "کسب‌وکار"],
  },
];

const posts = [
  {
    id: "post-1",
    title: "۱۰ روند طراحی وب که نباید از دست بدهید",
    summary:
      "آخرین روندهای طراحی که چهره فضای دیجیتال را شکل می‌دهند و راه‌های عملی برای به‌کارگیری آن‌ها در پروژه بعدی شما.",
    label: "طراحی",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
  },
  {
    id: "post-2",
    title: "راهنمای جامع جاوااسکریپت مدرن",
    summary:
      "با قابلیت‌های جدید جاوااسکریپت آشنا شوید؛ همان ویژگی‌هایی که توسعه وب را متحول کرده و کدنویسی را کارآمدتر می‌کند.",
    label: "فناوری",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
  },
  {
    id: "post-3",
    title: "ساخت وب‌اپلیکیشن‌های دسترس‌پذیر",
    summary:
      "بهترین روش‌ها برای ساخت برنامه‌هایی که برای همه کاربران  بدون توجه به توانایی یا محدودیت  قابل استفاده باشند.",
    label: "توسعه",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
  },
  {
    id: "post-4",
    title: "استراتژی‌های سئویی که واقعاً نتیجه می‌دهند",
    summary:
      "از میان هیاهو عبور کنید و تکنیک‌های اثبات‌شده سئو را بیاموزید؛ روش‌هایی که دیده‌شدن سایت و ترافیک ارگانیک را بهبود می‌دهند.",
    label: "بازاریابی",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-4.svg",
  },
  {
    id: "post-5",
    title: "آینده هوش مصنوعی در توسعه وب",
    summary:
      "بررسی کنید هوش مصنوعی چگونه از تولید کد تا بهبود تجربه کاربری، آینده توسعه وب را متحول می‌کند.",
    label: "فناوری",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-5.svg",
  },
  {
    id: "post-6",
    title: "طراحی واکنش‌گرا؛ فراتر از Media Query",
    summary:
      "تکنیک‌های پیشرفته برای طراحی‌هایی که واقعاً با هر دستگاه و اندازه صفحه‌ای سازگار می‌شوند  با قابلیت‌های مدرن CSS.",
    label: "طراحی",
    href: "#",
    image:
      "/block-media/shadcnblocks/block/placeholder-dark-6.svg",
  },
];

interface Blog1Props {
  className?: string;
}

const Blog1 = ({ className }: Blog1Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-8 md:mb-10 lg:mb-12">
          <h2 className="mb-6 w-full text-start text-xl font-medium md:mb-14 md:text-2xll lg:mb-16 lg:text-2xll">
            آخرین مطالب وبلاگ
          </h2>
          <div className="mb-10 flex flex-wrap items-center gap-x-4 gap-y-3 lg:gap-x-3">
            {filters.map((filter) => (
              <div key={filter.name} className="shrink-0">
                <Select>
                  <SelectTrigger className="text-black">
                    <SelectValue
                      placeholder={filter.name}
                      className="text-black"
                    />
                  </SelectTrigger>
                  <SelectContent>
                    {filter.values.map((value) => (
                      <SelectItem key={value} value={value}>
                        {value}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            ))}
          </div>
        </div>
        <div className="grid gap-4 md:grid-cols-2 lg:gap-6 2xl:grid-cols-3">
          {posts.map((post) => (
            <a
              key={post.id}
              href={post.href}
              className="group flex flex-col justify-between rounded-xl border border-border bg-accent p-6"
            >
              <div>
                <div className="flex aspect-3/2 overflow-clip rounded-xl">
                  <div className="flex-1">
                    <div className="relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105">
                      <img
                        src={post.image}
                        alt={post.title}
                        className="h-full w-full object-cover object-center"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div className="mb-2 line-clamp-3 pt-4 text-start text-lg font-medium break-words md:mb-3 md:pt-4 md:text-xl lg:pt-4">
                {post.title}
              </div>
              <div className="mb-8 line-clamp-2 text-start text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9">
                {post.summary}
              </div>
              <div>
                <Badge variant="outline">{post.label}</Badge>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Blog1 };