import ReactMarkdown from "react-markdown";

type ProductDetailDescriptionSectionProps = {
  /** Product description (Markdown); server-rendered in initial HTML per SEO. */
  description?: string | null;
};

const descriptionClasses =
  "max-w-3xl text-sm leading-relaxed text-[var(--foreground)]/80 [&_ol]:mb-3 [&_ol]:list-inside [&_ol]:list-decimal [&_p:last-child]:mb-0 [&_p]:mb-3 [&_ul]:mb-3 [&_ul]:list-inside [&_ul]:list-disc";

/**
 * Description content for the PDP tabs section.
 * Renders Markdown as HTML inside a parent <section> provided by ProductDetailTabsSection.
 * If empty, shows a short fallback message.
 */
export function ProductDetailDescriptionSection({
  description,
}: ProductDetailDescriptionSectionProps) {
  const hasContent =
    typeof description === "string" && description.trim().length > 0;

  return hasContent ? (
    <div className={descriptionClasses}>
      <ReactMarkdown>{description!.trim()}</ReactMarkdown>
    </div>
  ) : (
    <p className="text-sm text-[var(--muted)]">No description available.</p>
  );
}
