'use client';

import type { Product } from '../products/product.types';

interface ProductNotesProps {
  product: Pick<Product, 'accessoriesIncluded' | 'optionalAccessories' | 'detailedNotes'>;
}

/** Placeholder values some listings carry for "nothing to show" */
const hasText = (value?: string) => Boolean(value && value.trim() && value.trim() !== 'NA' && value.trim() !== '-');

/**
 * Free-text accessories and notes, shown above the technical data table.
 * Empty fields are skipped; the whole section is hidden when all three are empty.
 */
export default function ProductNotes({ product }: ProductNotesProps) {
  const sections = [
    { title: 'Accessories Included', value: product.accessoriesIncluded },
    { title: 'Optional Accessories', value: product.optionalAccessories },
    { title: 'Detailed Notes / Specifications', value: product.detailedNotes },
  ].filter((section): section is { title: string; value: string } => hasText(section.value));

  if (sections.length === 0) return null;

  return (
    <section className="py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10">
        <div className="max-w-6xl space-y-6">
          {sections.map(({ title, value }) => (
            <div key={title}>
              <h2 className="font-helvetica text-[24px] font-medium leading-[28px] tracking-normal text-[#0E1420]">
                {title}
              </h2>
              <p className="font-helvetica mt-3 whitespace-pre-line break-words text-[16px] font-normal leading-[24px] tracking-normal text-[#3A4756]">
                {value.trim()}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}