import React from 'react';
import { FlexProps, Flex } from '../Flex';
import { IconCircled } from '../IconCircled';
import { Box } from '../Box';
import { Heading, HeadingProps } from '../Heading';
import { Text } from '../Text';

export interface BigIconDisplayProps {
  icon: React.ComponentType<React.SVGAttributes<SVGElement>>;
  label?: string;
  children?: React.ReactNode;
  containerProps?: FlexProps;
  headingProps?: HeadingProps;
}

export function BigIconDisplay({
  label,
  icon,
  children,
  containerProps,
  headingProps,
}: BigIconDisplayProps) {
  return (
    <Flex {...containerProps}>
      <Box>
        <IconCircled
          Asset={icon}
          scale={0.75}
          width={48}
          height={48}
          color="brandMain"
          bg="brandLightest"
        />
      </Box>
      <Box ml="m">
        {label && (
          <Box>
            <Text variant="b1m" color="gray.2">
              {label}
            </Text>
          </Box>
        )}
        <Heading variant="h5" color="gray.1" {...headingProps}>
          {children}
        </Heading>
      </Box>
    </Flex>
  );
}
