/** @jsxRuntime classic */
/* * @jsx jsx */
import { css, jsx, useTheme } from '@emotion/react';
import React, { Fragment, ReactNode } from 'react';
import { Typography } from '../../atoms';
import { BnIcon, Button } from '../../components';
import { useColors } from '../../hooks/useColors';
import { useTypography } from '../../hooks/useTypography';
import { ETypography, ETypographyColor, Icons } from '../../types/theme';
import { SegmentCardContainer } from './style';

export interface ISegmentCardProps {
  withCta?: boolean;
  body?: ReactNode;
  title?: string;
  leftInfo?: string;
  handleBasicButton?: () => void;
  handleMainButton?: () => void;
}

export const SegmentCard = ({
  withCta = false,
  body,
  title,
  leftInfo,
  handleBasicButton,
  handleMainButton,
}: ISegmentCardProps) => {
  const { colors } = useColors();
  const { typography } = useTypography();

  return (
    <div css={SegmentCardContainer(colors, typography)}>
      <div className="header">
        <Typography
          color={ETypographyColor.secondary}
          type={ETypography.caption}
        >
          {title}
        </Typography>
        <Typography
          color={ETypographyColor.secondary}
          type={ETypography.caption}
        >
          {leftInfo}
        </Typography>
      </div>
      <div className="divider" />
      <div className="body">{body}</div>
      {withCta && (
        <Fragment>
          <div className="divider" />
          <div className="footer">
            <Button
              theme="basic"
              sizer="XS"
              type="button"
              onClick={handleBasicButton}
            >
              <BnIcon className="icon" icon={Icons.delete_outline} />
              Delete
            </Button>
            <Button
              theme="secondary"
              sizer="XS"
              type="button"
              onClick={handleMainButton}
            >
              EDIT SEGMENT
            </Button>
          </div>
        </Fragment>
      )}
    </div>
  );
};