portainer/app/react/components/BoxSelector/BoxSelectorItem.stories.tsx

import { Meta } from '@storybook/react-webpack5';
import { ReactNode } from 'react';
import { Briefcase } from 'lucide-react';

import Docker from '@/assets/ico/vendor/docker.svg?c';

import { IconProps } from '@@/Icon';

import { BoxSelectorItem } from './BoxSelectorItem';
import { BoxSelectorOption } from './types';

const meta: Meta = {
  title: 'Components/BoxSelector/Item',
  args: {
    selected: false,
    description: 'description',
    icon: Briefcase,
    label: 'label',
  },
};

export default meta;

interface ExampleProps {
  selected?: boolean;
  description?: string;
  icon?: IconProps['icon'];
  label?: string;
}

function Template({
  selected = false,
  description = 'description',
  icon,
  label = 'label',
}: ExampleProps) {
  const option: BoxSelectorOption<number> = {
    description,
    icon,
    id: 'id',
    label,
    value: 1,
  };

  return (
    <div className="boxselector_wrapper">
      <BoxSelectorItem
        onSelect={() => {}}
        option={option}
        radioName="radio"
        isSelected={() => selected}
      />
    </div>
  );
}

export const Example = Template.bind({});

export function SelectedItem() {
  return <Template selected />;
}

SelectedItem.args = {
  selected: true,
};

function IconTemplate({
  icon,
  iconType,
}: {
  icon: ReactNode;
  iconType: 'raw' | 'logo' | 'badge';
}) {
  return (
    <BoxSelectorItem
      onSelect={() => {}}
      option={{
        description: 'description',
        icon,
        iconType,
        label: 'label',
        id: 'id',
        value: 'value',
      }}
      isSelected={() => false}
      radioName="radio"
      slim
    />
  );
}

export function LogoItem() {
  return <IconTemplate icon={Docker} iconType="logo" />;
}

export function BadgeItem() {
  return <IconTemplate icon={Briefcase} iconType="badge" />;
}