import React from 'react'
import { View } from '../view'
import { EmptyState } from './EmptyState.jsx'

export default {
  title: 'Design System/Feedback/EmptyState',
  component: EmptyState,
  parameters: {
    docs: {
      description: {
        component:
          'Muted placeholder when a list or panel has no items. Defaults to the locale key `design-system.emptyState.message`.',
      },
    },
  },
}

export const Default = () => (
  <View surface="primary" roundness="m" inset="m" style={{ maxWidth: 360 }}>
    <EmptyState />
  </View>
)

export const CustomMessage = () => (
  <View surface="primary" roundness="m" inset="m" style={{ maxWidth: 360 }}>
    <EmptyState message="No resources in this folder yet." />
  </View>
)

export const AsParagraph = () => (
  <View surface="secondary" roundness="m" inset="m" style={{ maxWidth: 360 }}>
    <EmptyState as="p" message="Nothing scheduled for this week." />
  </View>
)