import { __ } from '@wordpress/i18n';

const STATUS_STYLES = {
    pending:   { bg: '#FEF3C7', color: '#B45309', label: __( 'Pending', 'appointly' ) },
    offered:   { bg: '#DBEAFE', color: '#1D4ED8', label: __( 'Offered', 'appointly' ) },
    confirmed: { bg: '#D1FAE5', color: '#047857', label: __( 'Confirmed', 'appointly' ) },
    declined:  { bg: '#FEE2E2', color: '#DC2626', label: __( 'Declined', 'appointly' ) },
    cancelled: { bg: '#F3F4F6', color: '#6B7280', label: __( 'Cancelled', 'appointly' ) },
};

export default function BookingStatusBadge( { status, large } ) {
    const style = STATUS_STYLES[ status ] || STATUS_STYLES.pending;

    return (
        <span
            className={ `appointly-status-badge${ large ? ' appointly-status-badge--large' : '' }` }
            style={ {
                backgroundColor: style.bg,
                color: style.color,
            } }
        >
            { style.label }
        </span>
    );
}