import React from 'react';
import { Button as ReactEmailButton } from '@react-email/components';
import { theme } from '../theme';

interface ButtonProps {
  href: string;
  children: React.ReactNode;
  variant?: 'primary' | 'accent';
}

export const Button = ({ href, children, variant = 'primary' }: ButtonProps) => {
  const backgroundColor =
    variant === 'accent' ? theme.colors.accent : theme.colors.brand;
  const color = variant === 'accent' ? theme.colors.surface : theme.colors.forest;

  return (
    <ReactEmailButton
      href={href}
      style={{
        backgroundColor,
        borderRadius: '8px',
        color,
        fontSize: '16px',
        fontWeight: '600',
        textDecoration: 'none',
        textAlign: 'center' as const,
        display: 'inline-block',
        padding: '12px 24px',
      }}
    >
      {children}
    </ReactEmailButton>
  );
};