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

interface ButtonProps {
  href: string;
  children: React.ReactNode;
}

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