import React from 'react';
import clsx from 'clsx';

type ButtonVariant =
    | 'primary'
    | 'secondary'
    | 'light'
    | 'success'
    | 'danger'
    | 'warning'
    | 'softPrimary'
    | 'softSecondary'
    | 'softSuccess'
    | 'softDanger'
    | 'softWarning'
    | 'softInfo'
    | 'border';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: ButtonVariant;
    size?: 'sm' | 'md' | 'lg' | 'icon';
    startIcon?: React.ReactNode;
    endIcon?: React.ReactNode;
}

const variantClassMap: Record<ButtonVariant, string> = {
    primary: 'ti-btn-primary',
    secondary: 'ti-btn-secondary',
    light: 'ti-btn-light',
    success: 'ti-btn-success',
    danger: 'ti-btn-danger',
    warning: 'ti-btn-warning',
    softPrimary: 'ti-btn-soft-primary',
    softSecondary: 'ti-btn-soft-secondary',
    softSuccess: 'ti-btn-soft-success',
    softDanger: 'ti-btn-soft-danger',
    softWarning: 'ti-btn-soft-warning',
    softInfo: 'ti-btn-soft-info',
    border: 'ti-border',
};

const sizeClassMap = {
    sm: 'px-3 py-2 text-sm',
    md: 'px-4 py-2.5 text-sm',
    lg: 'px-5 py-3 text-sm',
    icon: 'h-10 w-10 p-0',
};

export default function Button({
    variant = 'primary',
    size = 'md',
    className,
    startIcon,
    endIcon,
    children,
    type = 'button',
    ...props
}: ButtonProps): JSX.Element {
    return (
        <button
            type={type}
            className={clsx('ti-btn', variantClassMap[variant], sizeClassMap[size], className)}
            {...props}
        >
            {startIcon ? <span className="shrink-0">{startIcon}</span> : null}
            {children}
            {endIcon ? <span className="shrink-0">{endIcon}</span> : null}
        </button>
    );
}