import React from 'react';
import { Container, Header } from './index.styled';
import ToggleButtonComponent from '../../../toggle button';
import { useState } from 'react';

/**
 * @param {{label: string}} props
 * @returns {JSX.Element}
 */
const OptionsDropdown = ({ label, data }) => {
  const [isToggle, setIsToggle] = useState(false);
  return (
    <Container>
      <Header $toggle={isToggle} onClick={() => setIsToggle(!isToggle)}>
        <p>{label}</p>
        <Icon />
      </Header>
      {isToggle && (
        <>
          {data?.optionList && (
            <ul>
              {data?.optionList?.map((item, idx) => (
                <li key={idx}>
                  {item}
                  <ToggleButtonComponent />
                </li>
              ))}
            </ul>
          )}
          {data?.subSection &&
            data?.subSection?.map((section) => (
              <div className="section">
                <p>{section?.title}</p>
                <ul>
                  {section.optionList?.map((item, idx) => (
                    <li key={idx}>
                      {item}
                      <ToggleButtonComponent />
                    </li>
                  ))}
                </ul>
              </div>
            ))}
        </>
      )}
    </Container>
  );
};

const Icon = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M11.9983 8.28809L5.98828 14.2981L7.40228 15.7131L12.0023 11.1131L16.6023 15.7131L18.0093 14.2981L11.9983 8.28809Z"
      fill="#636666"
    />
  </svg>
);

export default OptionsDropdown;
