import React from 'react'
import { Meta, StoryObj } from '@storybook/react'
import Overflow from './Overflow.component'
import CategoriesCard from '../CategoriesCard/CategoriesCard.component'
import { IOverflow } from './Overflow.interface'

export default {
    title: 'Backlog/Overflow',
    component: Overflow,
    args: {
        linkElement: <a href="https://google.com" className="linker"></a>,
        buttonLabel: 'click',
        title: 'Handles'
    }
} as Meta

export const Simple: StoryObj<Partial<IOverflow>> = {
    render: args => {
        return (
            <Overflow style={{ width: '500px' }}>
                <CategoriesCard
                    imageElement={
                        <img
                            width="100%"
                            height="100%"
                            sizes="100vw"
                            decoding="async"
                            src="https://1122687140.rsc.cdn77.org/images/block1_651.jpg?1632156039"
                            alt="Empty state"
                        />
                    }
                    title={args.title}
                    buttonLabel={args.buttonLabel}
                    linkElement={args.linkElement}
                />
                <CategoriesCard
                    imageElement={
                        <img
                            width="100%"
                            height="100%"
                            sizes="100vw"
                            decoding="async"
                            src="https://1122687140.rsc.cdn77.org/images/block1_651.jpg?1632156039"
                            alt="Empty state"
                        />
                    }
                    title={args.title}
                    buttonLabel={args.buttonLabel}
                    linkElement={args.linkElement}
                />
            </Overflow>
        )
    }
}