import { ReactNode } from 'react';

interface ButtonProps {
    color: 'primary' | 'secondary';
    children: ReactNode;
    url?: string;
}

export default function Button({ color, children, url }: ButtonProps) {
    return (
        <a style={{
            backgroundColor: color === 'primary' ? 'var(--color-yellow)' : 'var(--color-darkblue)',
            borderRadius: '8px',
            borderWidth: '0',
            color: color === 'primary' ? 'var(--color-black)' : 'var(--color-white)',
            cursor: 'pointer',
            display: 'inline-block',
            fontFamily: '"Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif',
            fontSize: '20px',
            fontWeight: '500',
            lineHeight: '20px',
            listStyle: 'none',
            margin: '0',
            padding: '10px 12px',
            textAlign: 'center',
            transition: 'all 200ms',
            verticalAlign: 'baseline',
            whiteSpace: 'nowrap',
            userSelect: 'none',
            WebkitUserSelect: 'none',
            touchAction: 'manipulation',
            textDecoration: 'none',
        }} href={url} className="ni-button" role="button">{children}</a>
    )
}