import React from 'react'
import { View } from '../view/index.js'
import { DateDisplay } from './DateDisplay.jsx'

export default {
  title: 'Design System/Display/DateDisplay',
  component: DateDisplay,
  parameters: {
    layout: 'padded',
  },
}

const sampleMs = Date.parse('2026-06-20T14:30:00.000Z')

export const DateOnly = () => (
  <DateDisplay value={sampleMs} dateStyle="medium" />
)

export const WithTime = () => (
  <DateDisplay value={sampleMs} dateStyle="medium" timeStyle="short" />
)

export const LongFormat = () => (
  <DateDisplay value={sampleMs} dateStyle="full" timeStyle="short" />
)

export const Variants = () => (
  <View gap="s">
    <DateDisplay value={sampleMs} variant="heading-secondary" as="h2" dateStyle="long" />
    <DateDisplay value={sampleMs} variant="small" dateStyle="medium" timeStyle="short" />
  </View>
)