import { FileText } from "lucide-react";

import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const blogs = [
  {
    title: "چگونه یک وب‌سایت را از صفر طراحی کنیم",
    image:
      "/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
    date: "۳۱ اردیبهشت ۱۴۰۳",
  },
  {
    title: "بهترین ابزارها برای توسعه و طراحی وب",
    image:
      "/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg",
    date: "۲۳ خرداد ۱۴۰۳",
  },
  {
    title: "چگونه بازدید وب‌سایت خود را افزایش دهیم",
    image:
      "/block-media/external/unsplash/photo-1572733438515-8f143a854f72.jpg",
    date: "۱۵ تیر ۱۴۰۳",
  },
  {
    title: "آینده توسعه و طراحی وب",
    image:
      "/block-media/external/unsplash/photo-1546414701-81cc6963c67f.jpg",
    date: "۲۸ مرداد ۱۴۰۳",
  },
  {
    title: "تفاوت رابط کاربری و تجربه کاربری و چگونه برای هر دو طراحی کنیم",
    image:
      "/block-media/external/unsplash/photo-1647715360138-33fb6fe68539.jpg",
    date: "۱۷ شهریور ۱۴۰۳",
  },
  {
    title: "بهینه‌سازی وب‌سایت برای سئو و ترافیک بیشتر از موتورهای جستجو",
    image:
      "/block-media/external/unsplash/photo-1623496258831-091279081ac5.jpg",
    date: "۲ مهر ۱۴۰۳",
  },
  {
    title: "ابزارهای ضروری برای توسعه‌دهندگان و طراحان وب",
    image:
      "/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg",
    date: "۲۱ مهر ۱۴۰۳",
  },
];

interface Blog11Props {
  className?: string;
}

const Blog11 = ({ className }: Blog11Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("bg-muted/60 py-32", className)}>
      <div className="container">
        <div className="relative mx-auto flex max-w-7xl flex-col gap-20 lg:flex-row">
          <header className="top-10 flex h-fit flex-col items-center gap-5 text-center lg:sticky lg:max-w-80 lg:items-start lg:gap-8 lg:text-start">
            <FileText className="h-full w-14" strokeWidth={1} />
            <h1 className="text-xl font-extrabold lg:text-2xll">مطالب وبلاگ</h1>
            <p className="text-muted-foreground lg:text-xl">
              وبلاگ فرصتی مناسب برای انتشار دانش، تجربه و دیدگاه‌های تخصصی شماست.
                                      </p>
            <Separator />
            <nav>
              <ul className="flex flex-wrap items-center justify-center gap-4 lg:flex-col lg:items-start lg:gap-2">
                <li className="font-medium">
                  <a href="#">همه</a>
                </li>
                <li className="text-muted-foreground hover:text-primary">
                  <a href="#">طراحی</a>
                </li>
                <li className="text-muted-foreground hover:text-primary">
                  <a href="#">توسعه</a>
                </li>
                <li className="text-muted-foreground hover:text-primary">
                  <a href="#">بازاریابی</a>
                </li>
              </ul>
            </nav>
          </header>
          <div className="grid gap-4 md:grid-cols-2">
            {blogs.map((blog, index) => (
              <a
                href="#"
                key={index}
                className="group relative isolate h-80 rounded-lg bg-background"
              >
                <div className="z-10 flex h-full flex-col justify-between p-6 text-start">
                  <p className="text-muted-foreground transition-colors duration-500 group-hover:text-background">
                    {blog.date}
                  </p>
                  <h2 className="line-clamp-2 text-xl font-medium transition-colors duration-500 group-hover:text-background">
                    {blog.title}
                  </h2>
                </div>
                <img
                  src={blog.image}
                  alt={blog.title}
                  className="absolute inset-0 -z-10 size-full rounded-lg object-cover brightness-50 transition-all duration-500 ease-[cubic-bezier(0.77,0,0.175,1)] [clip-path:inset(0_0_100%_0)] group-hover:[clip-path:inset(0_0_0%_0)]"
                />
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Blog11 };