"use client";

import { cn } from "@/lib/utils";
import { useProduct } from "@/app/(users)/product/[slug]/product-page-client";

export default function KeyFeatures() {
  const product = useProduct();

  if (!product.features || product.features.length === 0) {
    return null;
  }

  return (
    <section className="mb-20">
      <div className="mb-8">
        <h2 className="text-2xl font-bold">Key Features</h2>
        <p className="mt-2 font-body-md text-body-md text-on-surface-variant">
          Highlights and capabilities of this product.
        </p>
      </div>

      <div className="grid grid-cols-2 lg:grid-cols-4">
        {product.features.map((item, i) => (
          <div
            key={item.title}
            className={cn(
              "group relative overflow-hidden border border-zinc-300 bg-surface p-6 transition-all duration-300 hover:border-primary",
              i === 0
                ? "rounded-l-xl"
                : product.features.length - 1 === i
                  ? "rounded-r-xl"
                  : "",
            )}
          >
            <div className="flex items-end gap-1 text-xl font-semibold">
              <span className="font-title-md text-title-md text-on-surface">
                {item.title}
              </span>
            </div>

            <p className="mt-4 font-body-md text-body-md text-on-surface-variant transition-colors group-hover:text-on-surface">
              {item.description ?? ""}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}