import tw, { css, styled } from 'twin.macro';

import { TRANSITION_DURATION, TRANSITION_FUNCTION } from './constants';
import { AccordionContentProps } from './types';

export const AccordionContent = styled.div(
  ({ transitionState = 'closed' }: AccordionContentProps) => [
    tw`overflow-y-hidden text-brand`,
    css`
      transition: height ${TRANSITION_DURATION}ms ${TRANSITION_FUNCTION} 0s;
      font-size: 22px;

      @media (max-width: 767px) {
        font-size: 18px;
      }
    `,

    transitionState === 'opened' && tw`visible`,

    (transitionState === 'opening' || transitionState === 'closing') &&
      tw`visible`,

    transitionState === 'closed' && tw`invisible`,
  ],
);

export const AccordionBtn = styled.button(() => [
  tw`
    flex justify-between items-center 
    w-full cursor-pointer font-semibold
    focus:outline-none focus-visible:shadow-outline text-brand
  `,
  css`
    font-size: 22px;
    text-align: left;
    padding: 24px 0;

    @media (max-width: 767px) {
      font-size: 18px;
    }
  `,
]);

export const AccordionBtnSummary = styled.span`
  display: inline-block;
  padding-right: 1rem;
`;