import React from "react";
import { Accordion, Col, Container, Row } from "react-bootstrap";
import Heading from "@/components/Heading";
import Image from "next/image";
import { cleanImage } from "../services/imageHandling";

const technicalDetailsData = [
  {
    id: "0",
    title: "CARCASS",
    image: "/image/technical-details/01.png",
    details: [
      {
        label: "Characteristics",
        value:
          "Crafted from 19 mm premium wood particle board panels, engineered for durability and performance. Specially treated with high-performance melamine resin, making it suitable for damp indoor spaces. Designed with low formaldehyde emission, ensuring a healthier and safer environment.",
      },
      { label: "Height", value: "790 mm" },
      { label: "Depth Options", value: "320 mm / 600 mm" },
      {
        label: "Width Options",
        value: "150 mm / 300 mm / 450 mm / 600 mm / 900 mm / 1200 mm",
      },
    ],
  },
  {
    id: "1",
    title: "DOORS AND FRONT PANELS",
    image: "/image/technical-details/01.png",
    details: [
      {
        label: "Characteristics",
        value:
          "Crafted from 19 mm premium wood particle board panels, engineered for durability and performance.",
      },
      { label: "Height", value: "790 mm" },
      { label: "Depth Options", value: "320 mm / 600 mm" },
      {
        label: "Width Options",
        value: "150 mm / 300 mm / 450 mm / 600 mm / 900 mm / 1200 mm",
      },
    ],
  },
  {
    id: "2",
    title: "WORKTOPS",
    image: "/image/technical-details/01.png",
    details: [
      {
        label: "Characteristics",
        value:
          "Crafted from 19 mm premium wood particle board panels, engineered for durability and performance. Specially treated with high-performance melamine resin, making it suitable for damp indoor spaces. Designed with low formaldehyde emission, ensuring a healthier and safer environment.",
      },
      { label: "Height", value: "790 mm" },
      { label: "Depth Options", value: "320 mm / 600 mm" },
      {
        label: "Width Options",
        value: "150 mm / 300 mm / 450 mm / 600 mm / 900 mm / 1200 mm",
      },
    ],
  },
  {
    id: "3",
    title: "HANDLES",
    image: "/image/technical-details/01.png",
    details: [
      {
        label: "Characteristics",
        value:
          "Crafted from 19 mm premium wood particle board panels, engineered for durability and performance. Specially treated with high-performance melamine resin, making it suitable for damp indoor spaces. Designed with low formaldehyde emission, ensuring a healthier and safer environment.",
      },
      { label: "Height", value: "790 mm" },
      { label: "Depth Options", value: "320 mm / 600 mm" },
      {
        label: "Width Options",
        value: "150 mm / 300 mm / 450 mm / 600 mm / 900 mm / 1200 mm",
      },
    ],
  },
  {
    id: "4",
    title: "FRONT FINISHES",
    image: "/image/technical-details/01.png",
    details: [
      {
        label: "Characteristics",
        value:
          "Crafted from 19 mm premium wood particle board panels, engineered for durability and performance. Specially treated with high-performance melamine resin, making it suitable for damp indoor spaces. Designed with low formaldehyde emission, ensuring a healthier and safer environment.",
      },
      { label: "Height", value: "790 mm" },
      { label: "Depth Options", value: "320 mm / 600 mm" },
      {
        label: "Width Options",
        value: "150 mm / 300 mm / 450 mm / 600 mm / 900 mm / 1200 mm",
      },
    ],
  },
];

const TechnicalDetails = ({ productData }) => {

  return (
    <>
      <section className="technicalDetails-section catalogues-secs sec_padd collection-section">
        <Container className="custom_container">
          <Row>
            <Col className="d-flex justify-content-center">
              <Heading el="h2" heading="Technical Details" />
            </Col>
          </Row>
          <Row>
            <Col>
              <div className="accordion01">
                <Accordion defaultActiveKey={productData?.[0]?.id?.toString()}>
                  {productData?.map((item) => (
                    <Accordion.Item
                      eventKey={item?.id?.toString()}
                      key={item?.id}
                    >
                      <Accordion.Header>{item?.title}</Accordion.Header>

                      <Accordion.Body>
                        <Row>
                          <Col md={5}>
                            <div className="image">
                              <Image
                                src={cleanImage(item?.image?.url)}
                                alt={item?.title}
                                width={743}
                                height={500}
                              />
                            </div>
                          </Col>

                          <Col md={7}>
                            {item?.details?.map((detail, index) => (
                              <div className="item" key={index}>
                                <div className="title">{detail?.label}</div>
                                <div
                                  className="info"
                                  dangerouslySetInnerHTML={{ __html: detail?.value }}
                                />
                              </div>
                            ))}
                          </Col>
                        </Row>
                      </Accordion.Body>
                    </Accordion.Item>
                  ))}
                </Accordion>
              </div>
            </Col>
          </Row>
        </Container>
      </section>
    </>
  );
};

export default TechnicalDetails;