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

const Wrapper = styled.div`
    border: 1px solid #E1E7ED;
    border-radius: 8px;
    background-color: #F5F7FA;
`;

const CollapsingButton = styled.div`
    padding: 0px 0px 0px 12px;
    display: flex;
    align-items: center;
    background-color: #FAFBFC;
    border-radius: 8px;
    div {
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        color: #363B40;
    }
    button {
        padding: 14px 12px 10px;
        margin-left: auto;
        background: none;
        border: none;
        cursor: pointer;
    }
`;
const Body = styled.div`
`;
type Props = {
    title: ReactNode;
    children: ReactNode;
}
export const Collapse: React.FC<Props> = (props) => {
    const [state, setState] = useState(true);

    return (
        <Wrapper>
            <CollapsingButton style={{borderBottom: state ? '1px solid #E1E7ED': 'none', borderBottomLeftRadius: state ? '0' : '8px', borderBottomRightRadius: state ? '0' : '8px', }}>
                <div>{props.title}</div>
                <button onClick={() => setState(!state)}>
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{transform: !state ? 'rotate(180deg)': 'rotate(0deg)', transformOrigin: '50% 50%'}}>
                        <path d="M7.41 15.705L12 11.125L16.59 15.705L18 14.295L12 8.29504L6 14.295L7.41 15.705Z" fill="#31333F" fillOpacity="0.6"/>
                    </svg>
                </button>
            </CollapsingButton>
            {
                state && (
                    <Body>
                        {props.children}
                    </Body>
                )
            }

        </Wrapper>
    )
}