import React, { ReactElement } from 'react';
import { BoxProps } from '../Box';
import { Box, Flex, Text, TooltipIcon } from '~/index';

export type LabeledComponentProps = {
  label: string;
  tooltip?: string;
  children: ReactElement;
} & BoxProps;

const LabeledComponent = ({
  label,
  tooltip,
  children,
  ...props
}: LabeledComponentProps) => {
  return (
    <Box {...props}>
      <Flex justifyContent="space-between">
        <Text variant="b2m" color="gray.1" lineHeight="24px">
          {label}
        </Text>
        {tooltip && <TooltipIcon content={tooltip} />}
      </Flex>
      {children}
    </Box>
  );
};

export default LabeledComponent;
