import { Meta, StoryObj } from '@storybook/react-webpack5';
import List from '../../../list';
import { ListItem, type ListItemProps } from '../../ListItem';
import {
  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
  SB_LIST_ITEM_CONTROLS as CONTROLS,
  SB_LIST_ITEM_MEDIA as MEDIA,
  SB_LIST_ITEM_PROMPTS as PROMPT,
  SB_LIST_ITEM_TEXT as TEXT,
} from '../subcomponents';

export default {
  component: ListItem,
  title: 'Content/ListItem/Tests/variants/surface: neutral',
  tags: ['!autodocs', '!manifest'],
  parameters: {
    controls: { disable: true },
    actions: { disable: true },
    knobs: { disable: true },
    padding: '0',
  },
  decorators: [
    (Story) => (
      <div
        style={{
          backgroundColor: 'var(--color-background-neutral)',
          padding: 80,
          minHeight: '100%',
        }}
      >
        <Story />
      </div>
    ),
  ],
} satisfies Meta<ListItemProps>;

type Story = StoryObj<ListItemProps>;

export const OnNeutralBackdrop: Story = {
  render: () => (
    <List>
      <ListItem
        title={TEXT.title}
        subtitle={TEXT.subtitle}
        valueTitle={TEXT.valueTitle}
        valueSubtitle={TEXT.valueSubtitle}
        additionalInfo={INFO.nonInteractive}
        control={CONTROLS.button}
        prompt={PROMPT.nonInteractive}
        media={MEDIA.avatarDouble}
      />
    </List>
  ),
};