import React from 'react'
import { Text } from './Text.jsx'

const body = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis massa eget mauris posuere feugiat.'

export default {
  title: 'Design System/Display/Text',
  component: Text,
  render: (props) => <Text {...props}>{props.children ?? body}</Text>,
}

export const Default = { args: { as: 'p', variant: 'default' } }

export const HeadingPrimary = { args: { as: 'h1', variant: 'heading-primary', children: 'Heading primary' } }

export const HeadingSecondary = { args: { as: 'h2', variant: 'heading-secondary', children: 'Heading secondary' } }

export const HeadingTertiary = { args: { as: 'h3', variant: 'heading-tertiary', children: 'Heading tertiary' } }

export const Display = { args: { as: 'h1', variant: 'display', children: 'Display headline' } }

export const Lead = { args: { as: 'p', variant: 'lead', children: 'Lead paragraph' } }

export const Logo = { args: { as: 'span', variant: 'logo', children: 'Logo' } }

export const Small = { args: { as: 'p', variant: 'small', children: body } }

export const WithTextProp = {
  render: () => (
    <Text as="p" variant="default" text="design-system.fields.addTag" />
  ),
}