import { AlignRight } from "lucide-react";

interface ProductDescriptionProps {
  description?: string | null;
}

/**
 * Full product description block. Preserves the seller's line breaks (bullet
 * lists from Instagram/WooCommerce imports come in as `\n`-separated lines),
 * with a proper heading so it reads as its own section on the detail page.
 *
 * Renders nothing when no description is set — the section header shouldn't
 * appear on products the seller hasn't filled out yet.
 */
export function ProductDescription({ description }: ProductDescriptionProps) {
  const body = (description || "").trim();
  if (!body) return null;

  return (
    <section className="w-full px-4 lg:px-0 my-6">
      <div className="flex items-center gap-2 mb-3">
        <AlignRight size={18} className="text-BLACK" />
        <h2 className="text-B16 lg:text-B20 font-bold">توضیحات محصول</h2>
      </div>
      <div
        className="text-R14 lg:text-[15px] leading-8 text-BLACK2 whitespace-pre-line"
        dir="rtl"
      >
        {body}
      </div>
    </section>
  );
}