import React, { FC } from 'react';
import { CheckCircle, Warning, XCircle } from 'phosphor-react-native';
import type { AlertTypes } from './alert';
import { colors } from '../../theme/theme';
import { Box } from '../Box';

interface IProps {
  icon?: JSX.Element;
  type?: AlertTypes;
  size?: number;
}

export type TIcon = {
  [icon in AlertTypes]: JSX.Element;
};

const renderIcon: TIcon = {
  success: <CheckCircle color={colors.green} weight="fill" />,
  danger: <XCircle size={18} color={colors.chiperBrandRed} weight="fill" />,
  warning: <Warning size={18} color={colors.brightYellow} weight="fill" />,
  action: <CheckCircle color={colors.green} weight="fill" />,
};

export const Icon: FC<IProps> = ({ icon, type, size }) => {
  return (
    <Box
      overflow="hidden"
      marginRight="spacing-xs"
      justifyContent="center"
      alignItems="center"
      height={size ?? 20}
      width={size ?? 20}
    >
      {icon}
      {type && !icon && renderIcon[type]}
    </Box>
  );
};