import type { Meta, StoryObj } from '@storybook/react';
import { deepCamelKeys } from 'string-ts';

import HOMEPAGE_RESPONSE_JSON from '@/__fixtures__/homepage.json';

import DiscoverCardCarousel from './DiscoverCardCarousel';

type PagePropsAndCustomArgs = React.ComponentProps<typeof DiscoverCardCarousel>;

const meta: Meta<PagePropsAndCustomArgs> = {
  title: 'components/DiscoverCardCarousel',
  component: DiscoverCardCarousel,
  argTypes: {
    className: {
      control: { type: 'text' },
    },
  },
};

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

const section = HOMEPAGE_RESPONSE_JSON.sections[0];

export const Default: Story = {
  render(args) {
    const { ...restProps } = args;
    return <DiscoverCardCarousel className='w-full' {...restProps} />;
  },
  args: {
    id: section.id,
    name: section.section_name,
    title: section.title,
    description: section.description || undefined,
    items: deepCamelKeys(section.items) as any,
    sectionType: section.section_type as any,
    styleType: section.style_type ?? undefined,
    // link: section.link || undefined,
  },
};

const hooksSection = HOMEPAGE_RESPONSE_JSON.sections[1];
export const Hooks: Story = {
  render(args) {
    const { ...restProps } = args;
    return <DiscoverCardCarousel className='w-full' {...restProps} />;
  },
  args: {
    id: hooksSection.id,
    name: hooksSection.section_name,
    title: hooksSection.title,
    description: hooksSection.description || undefined,
    items: deepCamelKeys(hooksSection.items) as any,
    sectionType: hooksSection.section_type as any,
    styleType: hooksSection.style_type ?? undefined,
    // link: hooksSection.link || undefined,
  },
};