'use client'

import React, { useState } from 'react'
import { StatusPage, ButtonGroup, Button, Stack, Icon, Card, CardBody, Toggle } from 'biibaos'
import { RefreshCw, Sparkles } from 'lucide-react'

export default function App() {
  const [status, setStatus] = useState<any>('404')
  const [preset, setPreset] = useState<'none' | 'subtle' | 'expressive'>('expressive')
  const [compact, setCompact] = useState(false)
  const [key, setKey] = useState(0) // Used to force-retrigger keyframe spring animations on selection

  const triggerReset = (newStatus: string) => {
    setStatus(newStatus)
    setKey(prev => prev + 1)
  }

  const triggerPresetChange = (newPreset: 'none' | 'subtle' | 'expressive') => {
    setPreset(newPreset)
    setKey(prev => prev + 1)
  }

  const handleAction = () => {
    alert(`Primary action clicked for status ${status}`)
  }

  const handleSecondaryAction = () => {
    alert(`Secondary action clicked for status ${status}`)
  }

  return (
    <Stack direction="column" gap={24} style={{ width: '100%' }}>
      {/* Configuration Controls */}
      <Card variant="flat" style={{ width: '100%' }}>
        <CardBody style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Stack direction="row" gap={12} wrap style={{ alignItems: 'center' }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--biiba-text-muted)', minWidth: 100 }}>
              Select Status:
            </span>
            <ButtonGroup attached>
              {['404', '401', '403', '500', '503', 'offline', 'success', 'empty', 'custom'].map((s) => (
                <Button
                  key={s}
                  size="sm"
                  variant={status === s ? 'primary' : 'secondary'}
                  onClick={() => triggerReset(s)}
                >
                  {s.toUpperCase()}
                </Button>
              ))}
            </ButtonGroup>
          </Stack>

          <Stack direction="row" gap={12} wrap style={{ alignItems: 'center' }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--biiba-text-muted)', minWidth: 100 }}>
              Animation Preset:
            </span>
            <ButtonGroup attached>
              {(['none', 'subtle', 'expressive'] as const).map((p) => (
                <Button
                  key={p}
                  size="sm"
                  variant={preset === p ? 'primary' : 'secondary'}
                  onClick={() => triggerPresetChange(p)}
                >
                  {p.charAt(0).toUpperCase() + p.slice(1)}
                </Button>
              ))}
            </ButtonGroup>

            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--biiba-text-muted)', marginLeft: 'auto', marginRight: 8 }}>
              Compact Layout:
            </span>
            <Toggle checked={compact} onChange={setCompact} />

            <Button 
              size="sm"
              variant="secondary" 
              leftIcon={<Icon icon={RefreshCw} size={13} />}
              onClick={() => setKey(prev => prev + 1)}
            >
              Replay Animation
            </Button>
          </Stack>
        </CardBody>
      </Card>

      {/* Live Preview Card Container */}
      <div 
        style={{ 
          width: '100%', 
          height: 480, 
          border: '1px solid var(--biiba-border)', 
          borderRadius: 'var(--biiba-radius-lg)', 
          overflow: 'hidden',
          background: 'var(--biiba-background)',
          boxShadow: 'var(--biiba-shadow-sm)',
          position: 'relative'
        }}
      >
        <StatusPage
          key={key}
          status={status}
          fullPage={false}
          compact={compact}
          animationPreset={preset}
          title={status === 'custom' ? 'Premium Custom Title' : undefined}
          description={status === 'custom' ? 'This is a premium status screen rendered with custom icon, title, and sequential animations.' : undefined}
          icon={status === 'custom' ? <Icon icon={Sparkles} /> : undefined}
          action={{
            label: 'Go back home',
            onClick: handleAction
          }}
          secondaryAction={status === 'success' || status === 'custom' ? {
            label: 'View details',
            onClick: handleSecondaryAction
          } : undefined}
        />
      </div>
    </Stack>
  )
}

'use client'

import React from 'react'
import { StatusPage } from 'biibaos'

export default function App() {
  return (
    <div style={{ width: '100%', height: 380, border: '1px solid var(--biiba-border)', borderRadius: 'var(--biiba-radius-lg)', overflow: 'hidden', position: 'relative' }}>
          <StatusPage
            status="success"
            fullPage={false}
            animationPreset="expressive"
            action={{ label: 'Continue' }}
          />
        </div>
  )
}

'use client'

import React from 'react'
import { StatusPage } from 'biibaos'

export default function App() {
  return (
    <div style={{ width: '100%', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
          <div style={{ border: '1px solid var(--biiba-border)', borderRadius: 'var(--biiba-radius-lg)', overflow: 'hidden', height: 320, position: 'relative' }}>
            <StatusPage
              status="empty"
              fullPage={false}
              compact
              action={{ label: 'Refresh Page', variant: 'secondary' }}
            />
          </div>
          <div style={{ border: '1px solid var(--biiba-border)', borderRadius: 'var(--biiba-radius-lg)', overflow: 'hidden', height: 320, position: 'relative' }}>
            <StatusPage
              status="offline"
              fullPage={false}
              compact
              action={{ label: 'Retry Connection', variant: 'secondary' }}
            />
          </div>
        </div>
  )
}