'use client';

interface ProductHighlightsProps {
  highlights: string[];
}

export default function ProductHighlights({ highlights }: ProductHighlightsProps) {
  const midpoint = Math.ceil(highlights.length / 2);
  const leftColumn = highlights.slice(0, midpoint);
  const rightColumn = highlights.slice(midpoint);

  return (
    <section className="">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
        <div className="w-full rounded-2xl bg-[#F7F8FA] p-8">
          <h2 className="font-helvetica mb-5 text-[24px] font-medium leading-[28px] tracking-normal text-[#0E1420]">
            Product Highlights
          </h2>

          <div className="grid gap-x-10 gap-y-2 md:grid-cols-2">
            {[leftColumn, rightColumn].map((column, columnIndex) => (
              <ul key={columnIndex} className="space-y-2">
                {column.map((item) => (
                  <li
                    key={item}
                    className="font-helvetica flex items-center gap-3 text-[16px] font-normal leading-[24px] tracking-normal text-[#3A4756]"
                  >
                    <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-[#3A4756]" />
                    {item}
                  </li>
                ))}
              </ul>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}