"use client";

import { RiCheckLine } from "@remixicon/react";
import Image from "next/image";
import { useProduct } from "@/app/(users)/product/[slug]/product-page-client";

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

  if (!product.description) {
    return null;
  }

  const highlights = product.highlights ?? [];

  return (
    <section className="mb-20 flex flex-col md:flex-row gap-16 items-center">
      <div className="w-full md:w-1/2">
        <h2 className="text-2xl font-bold mb-6">{product.name}</h2>
        <div className="space-y-4 font-body-md text-body-md text-on-surface-variant leading-relaxed">
          <p>{product.description}</p>
          {highlights.length > 0 && (
            <ul className="space-y-2 mt-6">
              {highlights.map((h) => (
                <li key={h} className="flex items-center gap-3">
                  <RiCheckLine className="text-primary" />
                  {h}
                </li>
              ))}
            </ul>
          )}
          {product.overview && (
            <p className="mt-4">{product.overview}</p>
          )}
        </div>
      </div>
      {product.media?.images && product.media.images.length > 0 && (
        <div className="rounded-lg overflow-hidden w-sm">
          <Image
            className="w-full h-full object-cover transition-transform duration-1000"
            width={1200}
            height={1200}
            alt={product.name}
            src={product.media.images[0].url}
          />
        </div>
      )}
    </section>
  );
}