import React from 'react';
import { keysTheme } from 'data/dataMx';
import { AtomSubtitle } from 'native/atoms/Typography/Subtitle';
import { AtomDivider } from 'native/atoms/Divider';
import { AtomBody } from 'native/atoms/Typography/Body';
import { AtomImage } from 'native/atoms/Image';
import {
  Banner,
  BannerImage,
  BannerContent,
  BannerContentTitle,
} from './styles';

export interface IBannerProps {
  /** Image of banner */
  image: string;
  /** Title of banner */
  title: string;
  /** Text description banner */
  text: string;
  /** Color of color title */
  titleColor?: keysTheme;
}

export const MoleculeBanner = ({image, title, text, titleColor}: IBannerProps) => {
  return (
    <Banner>
      <BannerContent>
        <BannerContentTitle> 
          <AtomSubtitle
            text={title}
            size='medium'
            weight='semibold'
            color={titleColor ? titleColor : 'primary'}
            align={'left'}
          />
          <AtomDivider color={'primary'} height={3} />
        </BannerContentTitle>
        <AtomBody
          text={text}
          size='large'
          weight='semibold'
          align={'left'}
        />
      </BannerContent>
      <BannerImage>
        <AtomImage
          src={image}
          alt='image'
          imgWidth={'100%'}
          imgHeight={'300px'}
        />
      </BannerImage>
    </Banner>
  )
}
