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: "Overview",
        content: product?.description,
      },
      {
        key: "composition",
        status: product?.composition_status,
        label: "Composition",
        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;
console.log(tabs,"tabs tabs");

  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;
