import React from 'react'
import { Button } from '../button'
import { Tags } from '../tags'
import { ContentHeader } from './ContentHeader.jsx'

export default {
  title: 'Design System/Layout/ContentHeader',
  component: ContentHeader,
  render: ({ showFar, statusTags, ...args }) => (
    <ContentHeader
      {...args}
      far={showFar ? (
        <Button variant="cta" prefix="add" label="design-system.add" />
      ) : undefined}
      near={statusTags?.length ? (
        <Tags tags={statusTags} size="s" />
      ) : undefined}
    />
  ),
}

export const Default = {
  args: {
    title: 'design-system.story.pageTitle',
    description: 'design-system.story.pageDescription',
    showFar: true,
  },
}

export const WithNearSlot = {
  args: {
    title: 'design-system.story.pageTitle',
    description: 'design-system.story.pageDescription',
    statusTags: ['Coming soon', 'Beta'],
    showFar: true,
  },
}

export const CustomTitle = {
  render: () => (
    <ContentHeader
      title={(
        <span style={{ fontWeight: 600, fontSize: '1.25rem' }}>
          Custom title node
        </span>
      )}
      description="design-system.story.pageDescription"
      near={<Tags tags={['Beta']} size="s" />}
      far={<Button variant="cta" prefix="add" label="design-system.add" />}
    />
  ),
}

export const DescriptionOnly = {
  args: {
    title: 'design-system.story.analyticsTitle',
    description: 'design-system.story.analyticsDescription',
    showFar: false,
  },
}

export const WideDescription = {
  args: {
    title: 'design-system.story.toolsTitle',
    description: 'design-system.story.toolsDescription',
    descriptionMaxWidth: 'm',
    statusTags: ['Beta'],
    showFar: false,
  },
}