import { getTranslations } from "next-intl/server";
import { Sparkles, ArrowRight } from "lucide-react";
import LocalePath from "@/shared/LocalePath";
import { CategoriesProps } from "@/interfaces/types";
import MediaWithFallback from "@/shared/MediaWithFallback";

export default async function Categories({
  categories,
}: {
  categories: CategoriesProps[];
}) {
  const t = await getTranslations();

  return (
    <section className="py-12 relative overflow-hidden">
      <div className="absolute inset-0 pointer-events-none">
        <div
          className="absolute top-20 right-10 w-72 h-72 bg-primary/5 rounded-full blur-3xl"
          style={{ transform: "scale(1.19518)" }}
        ></div>
        <div
          className="absolute bottom-20 left-10 w-96 h-96 bg-secondary/5 rounded-full blur-3xl"
          style={{ transform: "scale(1.03455)" }}
        ></div>
      </div>

      <div className="container mx-auto px-4 relative z-10">
        <div className="text-center mb-12 md:mb-16">
          <div className="inline-flex items-center gap-2 mb-4 px-6 py-2 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-full">
            <Sparkles className="w-[18px] h-[18px] text-primary" />
            <span className="text-sm text-primary">
              {t("Text.discover_better_categories")}
            </span>
            <Sparkles className="w-[18px] h-[18px] text-primary" />
          </div>
          <h2 className="text-3xl md:text-4xl mb-6 text-text-primary">
            {t("Text.categories")}
          </h2>
          <p className="text-text-secondary max-w-2xl mx-auto">
            {t(
              "Text.choose_from_our_wide_range_of_individual_roses_bouquets_and_arrangements",
            )}
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
          {categories.map((item, index) => (
            <LocalePath
              href={`/products?category_id=${item.id}`}
              key={index}
              className="relative cursor-pointer group rounded-3xl overflow-hidden hover:-translate-y-2 transition-all duration-300"
            >
              <div className="absolute inset-0 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-white p-[2px]">
                <div className="w-full h-full bg-white rounded-3xl"></div>
              </div>

              <div className="relative h-80 overflow-hidden rounded-3xl shadow-xl group-hover:shadow-2xl transition-all duration-500">
                <div className="absolute inset-0">
                  <MediaWithFallback
                    src={item.image}
                    alt={item.name}
                    className="w-full h-full object-cover"
                  />
                </div>

                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent group-hover:from-black/70 transition-all duration-500"></div>
                <div className="absolute inset-0 opacity-0 group-hover:opacity-100 bg-[linear-gradient(45deg,transparent_30%,rgba(255,255,255,0.1)_50%,transparent_70%)] bg-[length:200%_100%]"></div>

                <div className="absolute inset-0 flex flex-col justify-end p-8">
                  <div className="translate-y-4 transition-all duration-500 group-hover:translate-y-0">
                    <h3 className="text-3xl md:text-4xl mb-4 text-white drop-shadow-2xl relative">
                      <span className="relative inline-block">
                        {item.name}
                        <span className="absolute inset-0 blur-xl text-white opacity-0 group-hover:opacity-50">
                          {item.description}
                        </span>
                      </span>
                    </h3>

                    <div className="flex items-center gap-3 text-white/95 group-hover:text-white transition-colors">
                      <span className="text-sm font-medium relative">
                        {t("Text.explore")}
                      </span>
                      <ArrowRight className="w-5 h-5 drop-shadow-lg group-hover:translate-x-1 transition-all duration-300" />
                    </div>
                  </div>
                </div>

                <div className="absolute top-0 left-0 w-20 h-20 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                  <div className="w-full h-full bg-gradient-to-br from-white/20 to-transparent blur-sm [clip-path:polygon(0_0,100%_0,0_100%)]"></div>
                </div>
              </div>
            </LocalePath>
          ))}
        </div>
      </div>
    </section>
  );
}