interface MobileCourseBannerProps {
  selectedCount: number;
  totalSets: number;
  visible: boolean;
  onTap: () => void;
}

export function MobileCourseBanner({ selectedCount, totalSets, visible, onTap }: MobileCourseBannerProps) {
  const bannerStyle: React.CSSProperties = {
    position: 'fixed',
    bottom: 0,
    left: 0,
    width: '100%',
    zIndex: 1000,
    background: '#fff',
    borderTop: '1px solid #ddd',
    padding: '8px 12px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '6px',
    transform: visible ? 'translateY(0)' : 'translateY(100%)',
    transition: 'transform 200ms ease-out',
    cursor: 'pointer',
    boxSizing: 'border-box',
  };

  return (
    <div style={bannerStyle} onClick={onTap}>
      <span style={{ fontSize: '13px', fontWeight: 600, color: '#333' }}>
        {selectedCount} / {totalSets}
      </span>
      <span style={{ fontSize: '12px', color: '#666' }}>
        courses selected
      </span>
    </div>
  );
}