import React, { useMemo } from "react";
import "./Product_overview.css";
import { Col, Nav, Row, Tab } from "react-bootstrap";
import parse from "html-react-parser";

function Product_overview({ product }) {
  const hasContent = (html) => {
    if (!html) return false;
    const cleaned = html
      .replace(/<[^>]+>/g, "")
      .replace(/&nbsp;/g, "")
      .trim();
    return cleaned.length > 0;
  };

  const tabs = useMemo(() => {
    return [
      {
        key: "overview",
        status: product?.description_status,
        label: "Description",
        content: product?.description,
      },

      {
        key: "advantages",
        status: product?.advantages_status,
        label: "Specifications",
        content: product?.advantages,
      },
      {
        key: "composition",
        status: product?.composition_status,
        // label: "Size Chart",
        label: "Advantages",
        content: product?.composition,
      },
      
    ].filter((t) => t.status === true && hasContent(t.content)); // ✅ only show if status true AND has content
  }, [product]);

 

  return (
    <section className="Product_overview">
      <div>
        {tabs.length > 0 ? (
          <div className="Product_overview_tabs">
            {tabs.map((tab) => (
              <div className="product_overview_section" key={tab.key}>
                <h4>{tab.label}</h4>

                <div className="product_overview_content">
                  {parse(tab.content)}
                </div>
              </div>
            ))}
          </div>
        ) : (
          <p
            className="text-center"
            style={{
              color: "red",
              fontWeight: "500",
              marginTop: "20px",
            }}
          >
            {/* No product details available */}
          </p>
        )}
      </div>
    </section>
  );
}

export default Product_overview;
