Calendar

'use client'

import { Calendar, Stack, Text, Button } from 'biibaos'
import { useState } from 'react'

export default function TripPlanner() {
  const [range, setRange] = useState<[Date | null, Date | null]>([
    new Date(), 
    new Date(new Date().setDate(new Date().getDate() + 7))
  ])

  return (
    <Stack direction="column" gap={20} align="center" fullWidth>
      <Text variant="h3" weight="bold">Trip Planner</Text>
      <Text color="muted" align="center" size="sm">
        Select your departure and return dates.
      </Text>
      
      <Calendar 
        mode="range"
        selected={range}
        onSelect={(r: any) => setRange(r)}
        minDate={new Date()}
        maxDate={new Date(new Date().setMonth(new Date().getMonth() + 3))}
      />

      <div style={{ 
        padding: '12px 16px', 
        background: 'var(--biiba-surface)', 
        borderRadius: 12, 
        border: '1px solid var(--biiba-border)', 
        width: '100%', 
        maxWidth: 320 
      }}>
        <Stack direction="row" justify="between" align="center">
          <div>
            <Text size="xs" color="muted" weight="bold" transform="uppercase">Check-in</Text>
            <Text size="sm" weight="semibold">{range[0]?.toLocaleDateString() || '--'}</Text>
          </div>
          <div style={{ height: 20, width: 1, background: 'var(--biiba-border)' }} />
          <div style={{ textAlign: 'right' }}>
            <Text size="xs" color="muted" weight="bold" transform="uppercase">Check-out</Text>
            <Text size="sm" weight="semibold">{range[1]?.toLocaleDateString() || '--'}</Text>
          </div>
        </Stack>
      </div>
    </Stack>
  )
}

'use client'

import { Calendar } from 'biibaos'
import { useState } from 'react'

export default function BasicCalendar() {
  const [date, setDate] = useState(new Date())
  return (
    <Calendar 
      selected={date} 
      onSelect={(d: any) => setDate(d)} 
    />
  )
}