/**
 * ListsEmptyState — shown in ListsIndex when the user has no lists.
 *
 * UI-SPEC §ListsEmptyState:
 *   - Center-aligned in the list-index scrollable area
 *   - Icon: ClipboardList (lucide-react, 32px, --color-text-muted)
 *   - Heading: "No lists yet" (--text-heading-*)
 *   - Body: "Tap + to create your first shared list — Groceries, Gift Ideas, or anything else."
 *
 * T-04-06 XSS guard: all text is static plain-text JSX children (no user input).
 */

import { ClipboardList } from 'lucide-react'

export function ListsEmptyState() {
  return (
    <div
      role="status"
      aria-live="polite"
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
        padding: '48px var(--space-4)',
        gap: 'var(--space-4)',
        textAlign: 'center',
        fontFamily: 'var(--font-family-base)',
      }}
    >
      <ClipboardList
        size={32}
        color="var(--color-text-muted)"
        aria-hidden="true"
      />
      <div
        style={{
          fontSize: 'var(--text-heading-size, 18px)',
          fontWeight: 600,
          color: 'var(--color-text-primary)',
          lineHeight: 'var(--text-heading-line-height, 1.25)',
        }}
      >
        {/* Plain text — XSS guard */}
        No lists yet
      </div>
      <div
        style={{
          fontSize: 'var(--text-body-size, 15px)',
          fontWeight: 400,
          color: 'var(--color-text-muted)',
          lineHeight: 'var(--text-body-line-height, 1.5)',
          maxWidth: '280px',
        }}
      >
        {/* Plain text — XSS guard */}
        Tap + to create your first shared list &mdash; Groceries, Gift Ideas, or anything else.
      </div>
    </div>
  )
}