import React, { useState } from "react";
import styled from "styled-components";

const DropdownResult = ({ label, element }) => {
  const [toggle, setToggle] = useState(false);
  return (
    <Container>
      <Action
        onClick={() => {
          setToggle(!toggle);
        }}
      >
        <p>{label}</p>
        <Icon />
      </Action>
      {toggle && element && <Content>{element}</Content>}
    </Container>
  );
};

const Container = styled.div`
  border-radius: 10px;
  overflow: hidden;
  background: #f5f7f7;
`;
const Action = styled.div`
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  width: 100%;
  background: #e8fafa;
  padding: 0 20px;
  cursor: pointer;
  p {
    color: #00c2c2;
    font-size: 16px;
    font-weight: 600;
  }
`;
const Content = styled.div`
  padding: 20px;
`;

const Icon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="25"
    height="25"
    viewBox="0 0 25 25"
    fill="none"
  >
    <path
      d="M3.54297 8.58922L12.028 17.0742L20.513 8.58922L19.099 7.17422L12.028 14.2462L4.95697 7.17422L3.54297 8.58922Z"
      fill="#4A4D4D"
    />
  </svg>
);
export default DropdownResult;
