import type { FC, ReactNode } from 'react';

import Box from '../Box';
import Card from '../Card';
import TitleText from '../TitleText';

interface ActionCardProps {
  title: ReactNode;
  description?: ReactNode;
  renderButton?: () => ReactNode;
  testId?: string;
}

const ActionCard: FC<ActionCardProps> = ({
  title,
  description,
  renderButton,
  testId,
}) => {
  const button = renderButton && renderButton();

  return (
    <Card padding="2.6rem 2.1rem" maxWidth="46rem" data-testid={testId}>
      <TitleText title={title} subtitle={description} spaceBetween="1.1rem" />
      {button && <Box margin="2rem 0 0">{button}</Box>}
    </Card>
  );
};

export default ActionCard;