import { Button, type ButtonProps } from '@radix-ui/themes';
import { LoaderCircle } from 'lucide-react';

export type SubmitButtonProps = {
  loading?: boolean;
  label?:
    | {
        default?: string;
        loading?: string;
      }
    | string;
} & React.ButtonHTMLAttributes<HTMLButtonElement> &
  ButtonProps;

export function SubmitButton({ loading, label, ...props }: SubmitButtonProps) {
  return (
    <Button
      type="submit"
      disabled={loading}
      style={{
        padding: '10px 14px',
        borderRadius: 6,
        border: 'none',
        backgroundColor: 'var(--iris-9)',
      }}
      size="3"
      {...props}
    >
      {loading
        ? typeof label === 'string'
          ? label
          : label?.loading ?? <LoaderCircle className="animate-spin" style={{ width: 24, height: 24, marginRight: 4, verticalAlign: 'middle', color: 'white' }} />
        : typeof label === 'string'
        ? label
        : label?.default ?? 'Submit'}
    </Button>
  );
}

export function ResetButton(props: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button type="reset" {...props} style={{ padding: '10px 14px', borderRadius: 6, border: '1px solid var(--gray-5)', background: 'white', ...props.style }}>
      {props.children ?? 'Reset'}
    </button>
  );
}