/**
 * EmptyState — shown when a calendar fetch succeeds but returns zero events.
 *
 * UI-SPEC §EmptyState:
 *   - Centered in the calendar viewport
 *   - Icon: lucide-react CalendarDays (32px, --color-text-muted)
 *   - Heading: "Nothing here"
 *   - Body: "No events in this period. Try a different date or switch views."
 *
 * Only rendered when fetch succeeded AND zero events in the visible window.
 */

import { CalendarDays } from 'lucide-react'

export function EmptyState() {
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        padding: 'var(--space-12)',
        gap: 'var(--space-4)',
        fontFamily: 'var(--font-family-base)',
        textAlign: 'center',
        flex: 1,
      }}
    >
      <CalendarDays
        size={32}
        style={{ color: 'var(--color-text-muted)' }}
        aria-hidden="true"
      />
      <div>
        <h2
          style={{
            margin: '0 0 var(--space-2)',
            fontSize: 'var(--text-heading-size)',
            fontWeight: 'var(--text-heading-weight)',
            lineHeight: 'var(--text-heading-line-height)',
            color: 'var(--color-text-primary)',
          }}
        >
          Nothing here
        </h2>
        <p
          style={{
            margin: 0,
            fontSize: 'var(--text-body-size)',
            fontWeight: 'var(--text-body-weight)',
            lineHeight: 'var(--text-body-line-height)',
            color: 'var(--color-text-muted)',
            maxWidth: '280px',
          }}
        >
          No events in this period. Try a different date or switch views.
        </p>
      </div>
    </div>
  )
}