import Image from "next/image";
import { ChevronRight } from "lucide-react";
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { useTranslations } from "next-intl";
import ProductCard from "../products/productCard";

export function Blog() {
  const t = useTranslations();
  const blogPosts = [
    {
      id: 1,
      image: "/images/img14.webp",
      category: "Tips & Trick",
      title: t("home.blog.articles.article1"),
      author: "John Doe",
      date: "July 24, 2025",
    },
    {
      id: 2,
      image: "/images/img15.webp",
      category: "Insight",
      title: t("home.blog.articles.article2"),
      author: "John Doe",
      date: "July 24, 2025",
    },
    {
      id: 3,
      image: "/images/img16.webp",
      category: "News",
      title: t("home.blog.articles.article3"),
      author: "John Doe",
      date: "July 24, 2025",
    },
  ];

  return (
    <section className="bg-[#1f1f1f] py-45">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mb-12 text-center">
          <div className="mb-4 flex items-center justify-center gap-2">
            <DotAnimatsiya />
            <span className="font-almarai text-sm font-semibold tracking-wider text-white uppercase">
              {t("products.banner.title")}
            </span>
          </div>
          <h2
            className="font-unbounded bg-linear-to-br from-white py-2 via-white to-black
  text-transparent bg-clip-text text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl"
          >
            {t("products.ourproducts")}
          </h2>
        </div>

        {/* Blog Cards Grid */}
        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 max-sm:place-items-center">
          {/* {blogPosts.map((post) => (
            <article key={post.id} className="group">

              <div className="relative mb-6 aspect-4/2 md:aspect-4/3 overflow-hidden rounded-lg">
                <Image
                  src={post.image || "/placeholder.svg"}
                  alt={post.title}
                  fill
                  className="object-cover transition-transform duration-300 group-hover:scale-105"
                />

                <div className="absolute bottom-4 left-4">
                  <span className="font-almarai rounded bg-red-600 px-4 py-2 text-sm font-medium text-white">
                    {post.category}
                  </span>
                </div>
              </div>

              <div>
                <h3 className="font-unbounded uppercase mb-3 text-lg font-bold leading-tight tracking-wide text-white md:text-xl">
                  {post.title}
                </h3>
                <p className="font-almarai mb-4 text-sm text-gray-400">
                  <span className="text-gray-500">by </span>
                  <span className="text-white">{post.author}</span>
                  <span className="mx-2 text-gray-500">•</span>
                  <span className="text-gray-400">{post.date}</span>
                </p>
                <a
                  href="#"
                  className="font-almarai inline-flex items-center gap-1 text-sm font-semibold tracking-wider text-red-600 uppercase transition-colors hover:text-red-500"
                >
                  {t("home.blog.readMore")}
                  <ChevronRight className="h-4 w-4" />
                </a>
              </div>
            </article>
          ))} */}
          {Array(3)
            .fill(null)
            .map((_, index) => (
              <ProductCard
                key={index}
                title="Elektr yong'in detektori-Ypres ver.2"
                name="P-0834404"
                image="/images/products/products.webp"
                slug="P_0834404"
                status="full"
              />
            ))}
        </div>
      </div>
    </section>
  );
}