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

import HOMEPAGE_SHORTCUT_JSON from '@/__fixtures__/homepage_shortcuts.json';
import Playbar from '@/components/playbar/Playbar';
import ShortcutItem, {
  ShortcutType,
} from '@/components/shortcuts/ShortcutItem';

type PagePropsAndCustomArgs = React.ComponentProps<typeof ShortcutItem>;

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/shortcut/ShortcutItem',
  component: ShortcutItem,
};

export default meta;
type Story = StoryObj<PagePropsAndCustomArgs>;

const shortcutItem = HOMEPAGE_SHORTCUT_JSON.sections[0].items[0];

export const Default: Story = {
  render(args: PagePropsAndCustomArgs) {
    return (
      <>
        <ShortcutItem {...args} />
        <Playbar />
      </>
    );
  },
  args: {
    id: shortcutItem.id as ShortcutType,
    imageUrl: shortcutItem.image_url,
    title: shortcutItem.name,
    description: shortcutItem.description,
    redirectUrl: shortcutItem.redirect_url,
    playlistContextId: '123',
    shortcutContext: shortcutItem.shortcut_context,
    index: 0,
  },
};