import React from 'react'
import { Button } from '../button'
import { Text } from '../text'
import { Tags } from '../tags'
import { AppHeader } from './AppHeader.jsx'
import { ComponentSlotsProvider } from '../component-slots'
import { appLogoSlots } from './appLogoSlots.jsx'

export default {
  title: 'Design System/Layout/AppHeader',
  component: AppHeader,
  decorators: [
    (Story) => (
      <ComponentSlotsProvider slots={appLogoSlots}>
        <Story />
      </ComponentSlotsProvider>
    ),
  ],
}

export const Default = () => (
  <AppHeader
    far={(
      <>
        <Button variant="link" prefix="sun" label="Cloud Light" />
        <Button variant="link" prefix="profile" label="Profile" />
      </>
    )}
  />
)