import type { Meta, StoryObj } from '@storybook/react'

import { IIconTitle } from './IconTitle.interface'
import Icon from '@/components/atoms/Icon'
import Heading from '@/components/atoms/Heading'
import IconTitle from './IconTitle.component'
import React from 'react'

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
  title: 'Components/IconTitle',
  component: IconTitle
} as Meta

export const IconStory: StoryObj<IIconTitle> = {
  render: args => (
    <IconTitle {...args}>
      <Heading size="texts" tag="h4">
        Lorem ipsum
      </Heading>
    </IconTitle>
  ),
  args: {
    icon: <Icon icon="icon-right" />
  }
}

export const Image: StoryObj<IIconTitle> = {
  render: args => (
    <IconTitle {...args}>
      <Heading size="texts" tag="h4">
        Lorem ipsum
      </Heading>
    </IconTitle>
  ),
  args: {
    imageElement: (
      <img
        width="100%"
        height="100%"
        sizes="100vw"
        decoding="async"
        src="/assets/placeholder.png"
        alt="Empty state"
      />
    )
  }
}