import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import Timestamp from './'

<Meta title="Components/Text/Timestamp" component={Timestamp} />

# Timestamp

A Timestamp component renders the UI for the time and read status, typicaly used within a `Message` component.

<Canvas>
  <Story name="default">
    <Timestamp timestamp="10:41am" />
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: HSDS

<br />
<br />

### Props

<ArgsTable of={Timestamp} />

### Stories

#### Formatter

<Canvas>
  <Story name="Formatter">
    <Timestamp
      timestamp={new Date().toISOString()}
      live
      formatter={timestamp => {
        const now = new Date().toLocaleString('en-GB', { timeZone: 'UTC' })
        return `${timestamp} (updated at ${now})`
      }}
    />
  </Story>
</Canvas>
