import { Warning } from 'phosphor-react-native';
import React, { ReactNode } from 'react';
import { colors } from '../../theme/theme';
import { Box } from '../Box';
import { CollapsibleButton, CollapsibleContent } from '../Collapsible';
import { CollapsibleProvider } from '../Collapsible/providers/context';
import { Text } from '../Text';

interface IAlertCollapsible {
  title: string;
  subtitle: ReactNode;
  description: ReactNode;
}

export const AlertCollapsible = ({
  title,
  subtitle,
  description,
}: IAlertCollapsible) => {
  return (
    <CollapsibleProvider>
      <Box backgroundColor={'white'} borderRadius={4} p="spacing-s">
        <Box flexDirection={'row'} alignItems={'center'}>
          <Warning weight="fill" size={25} color={colors.brightYellow} />
          <Text marginLeft={'spacing-s'} variant={'SubTitle'}>
            {title}
          </Text>
          <CollapsibleButton style={{ marginLeft: 'auto' }} />
        </Box>
        <CollapsibleContent pt={'spacing-s'}>
          {typeof subtitle === 'string' ? (
            <Text
              variant={'mediumBody'}
              color="yankeesBlue"
              fontFamily={'CaustenRound-Bold'}
            >
              {subtitle}
            </Text>
          ) : (
            subtitle
          )}
          {typeof description === 'string' ? (
            <Text variant={'mediumBody'} color="yankeesBlue">
              {description}
            </Text>
          ) : (
            description
          )}
        </CollapsibleContent>
      </Box>
    </CollapsibleProvider>
  );
};