// [REQ V4]  Spójny design – StatusBadge jako atom UI z kolorami dla każdego statusu rezerwacji
import styles from './StatusBadge.module.scss';

const LABELS = {
  confirmed: 'Confirmed',
  pending: 'Pending',
  cancelled: 'Cancelled',
};

const StatusBadge = ({ status, size = 'md' }) => {
  const label = LABELS[status] ?? status;

  return (
    <span
      className={[
        styles['status-badge'],
        styles[`status-badge--${status}`],
        styles[`status-badge--${size}`],
      ].join(' ')}
      aria-label={`Status: ${label}`}
    >
      <span className={styles['status-badge__dot']} aria-hidden="true" />
      <span className={styles['status-badge__label']}>{label}</span>
    </span>
  );
};

export default StatusBadge;
