import { Checkbox, Badge } from 'antd';

const VARIANT_BG = {
  public: 'rgba(27, 40, 56, 0.92)',
  admin: 'rgba(26, 16, 37, 0.92)',
};

interface Props {
  showEvents: boolean;
  onToggle: (checked: boolean) => void;
  eventCount: number;
  variant?: 'admin' | 'public';
}

export default function EventLayerToggle({ showEvents, onToggle, eventCount, variant = 'admin' }: Props) {
  return (
    <div
      style={{
        position: 'absolute',
        top: 10,
        left: 12,
        zIndex: 1000,
        background: VARIANT_BG[variant],
        borderRadius: 8,
        padding: '8px 12px',
        backdropFilter: 'blur(8px)',
        border: '1px solid rgba(255,255,255,0.12)',
      }}
    >
      <Checkbox
        checked={showEvents}
        onChange={(e) => onToggle(e.target.checked)}
        style={{ fontSize: 12 }}
      >
        <span style={{ color: 'rgba(255,255,255,0.85)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <span
            style={{
              display: 'inline-block',
              width: 12,
              height: 12,
              borderRadius: '50%',
              backgroundColor: '#e67e22',
              border: '1px solid rgba(255,255,255,0.4)',
              flexShrink: 0,
            }}
          />
          Events
          <Badge
            count={eventCount}
            size="small"
            style={{ backgroundColor: '#e67e22' }}
          />
        </span>
      </Checkbox>
    </div>
  );
}
