import { ReactNode } from 'react';
import { Button } from '@react-email/button';

import { emailTheme } from 'src/common-style';

const callToActionStyle = {
  display: 'flex',
  padding: '8px 32px',
  borderRadius: emailTheme.border.radius.md,
  border: `1px solid ${emailTheme.background.transparent.light}`,
  background: emailTheme.background.radialGradient,
  boxShadow: `0px 2px 4px 0px ${emailTheme.background.transparent.light}, 0px 0px 4px 0px ${emailTheme.background.transparent.medium}`,
  color: emailTheme.font.colors.inverted,
  fontSize: emailTheme.font.size.md,
  fontWeight: emailTheme.font.weight.bold,
};

type CallToActionProps = {
  href: string;
  value: ReactNode;
};

export const CallToAction = ({ value, href }: CallToActionProps) => {
  return (
    <Button href={href} style={callToActionStyle}>
      {value}
    </Button>
  );
};