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

import Image from './Image'
import { DocsTemplate } from '../../../.storybook'

const meta: Meta<typeof Image> = {
  title: 'Components/Image',
  component: Image,
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=3777-13726&t=jsd8kEmb1sJfCa2m-0',
    },
    docs: {
      page: () => (
        <DocsTemplate
          figmaLink='https://www.figma.com/design/RvhKD82948FMQnh5MyCi0o/Web-Design-System?node-id=3777-13726&t=jsd8kEmb1sJfCa2m-0'
          description={
            <span>
              The <code>Image</code> component is designed to display product
              images consistently within our applications. It ensures a uniform
              presentation of product visuals while providing fallback options
              in case of image URL issues. Additionally, the component allows
              developers to override the default image size for flexibility in
              different contexts.
            </span>
          }
          infoBullets={[
            <span key='first-bullet'>
              Utilize the <code>Image</code> component to showcase product
              visuals in product pages, listings, or any section where images
              are displayed.
            </span>,
          ]}
        />
      ),
    },
  },
}

export default meta

type Story = StoryObj<typeof Image>

const Template: Story = {
  render: (args) => {
    return <Image {...args} />
  },
}

export const Basic: Story = {
  ...Template,
  args: {
    alt: 'Product Image',
    style: { width: '50px', height: '50px' },
    url: 'https://target.scene7.com/is/image/Target/GUEST_4e3324b1-e864-4e12-9587-a29aa476f629?wid=800&hei=800&qlt=80&fmt=pjpeg',
  },
}

export const NoImageUrl: Story = {
  ...Template,
  args: {},
}

export const BadImageUrl: Story = {
  ...Template,
  args: {
    url: 'bad-url',
  },
}

export const CustomNoImageSize: Story = {
  ...Template,
  args: {
    iconSize: {
      height: '20px',
      width: '20px',
    },
  },
}