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: "description",
        status: product?.description_status,
        label: "Description",
        content: product?.description,
      },
      {
        key: "specification",
        status: product?.composition_status,
        label: "Specification",
        content: product?.composition,
      },
      {
        key: "advantages",
        status: product?.advantages_status,
        label: "Advantages",
        content: product?.advantages,
      },
      {
        key: "preservation",
        status: product?.preservation_status,
        label: "Preservation",
        content: product?.preservation,
      },
    ].filter((t) => t.status === true && hasContent(t.content)); // ✅ only show if status true AND has content
  }, [product]);

  const defaultActiveKey = tabs.length > 0 ? tabs[0].key : null;

  return (
    <section className="Product_overview">
      <div>
        {tabs.length > 0 ? (
          <div className="Product_overview_tabs">
            <Tab.Container
              id="product-tabs"
              defaultActiveKey={defaultActiveKey}
            >
              <Nav variant="pills" className="flex tabs_holder">
                {tabs.map((tab) => (
                  <Nav.Item key={tab.key}>
                    <Nav.Link eventKey={tab.key}>{tab.label}</Nav.Link>
                  </Nav.Item>
                ))}
              </Nav>

              <Tab.Content className="tab_content_holder">
                {tabs.map((tab) => (
                  <Tab.Pane key={tab.key} eventKey={tab.key}>
                    <p>{parse(tab.content)}</p>
                  </Tab.Pane>
                ))}
              </Tab.Content>
            </Tab.Container>
          </div>
        ) : (
          <p
            className="text-center"
            style={{
              color: "red",
              fontWeight: "500",
              marginTop: "20px",
            }}
          >
            No product details available
          </p>
        )}
      </div>
    </section>
  );
}

export default Product_overview;
