import { IconDraggable, IDraggableItem } from '@/components';
import { DndAttribute } from '@/stories/drag-and-drop/templates/DndAttribute';
import { DndTrait } from '@/stories/drag-and-drop/templates/DndTrait';

export const DRAG_AND_DROP_DATA: IDraggableItem[] = [
  {
    id: 1,
    content: (
      <div className="w-fit inline-flex bg-purple-ui mr-2 my-2 rounded-[3px] py-[5px] pr-[15px] pl-[8px] items-center">
        <IconDraggable className="mr-3" />
        <span>Square</span>
      </div>
    ),
  },
  {
    id: 2,
    content: (
      <div className="w-fit inline-flex bg-purple-ui mr-2 my-2 rounded-[3px] py-[5px] pr-[15px] pl-[8px] items-center">
        <IconDraggable className="mr-3" />
        <span>Triangle</span>
      </div>
    ),
  },
  {
    id: 3,
    content: (
      <div className="w-fit inline-flex bg-purple-ui mr-2 my-2 rounded-[3px] py-[5px] pr-[15px] pl-[8px] items-center">
        <IconDraggable className="mr-3" />
        <span>Eyes</span>
      </div>
    ),
  },
  {
    id: 4,
    content: (
      <div className="w-fit inline-flex bg-purple-ui mr-2 my-2 rounded-[3px] py-[5px] pr-[15px] pl-[8px] items-center">
        <IconDraggable className="mr-3" />
        <span>Pants</span>
      </div>
    ),
  },
];

export const DRAG_AND_DROP_ATTRIBUTES_DATA: IDraggableItem[] = [
  {
    id: 1,
    content: <DndAttribute title={'Square'} toggleAction={() => console.log('Square')} className="bg-gray-ui-100" />,
  },
  {
    id: 2,
    content: (
      <DndAttribute title={'Triangle'} toggleAction={() => console.log('Triangle')} className="bg-gray-ui-100" />
    ),
  },
  {
    id: 3,
    content: <DndAttribute title={'Eyes'} toggleAction={() => console.log('Eyes')} className="bg-gray-ui-100" />,
  },
  {
    id: 4,
    content: <DndAttribute title={'Pants'} toggleAction={() => console.log('Pants')} className="bg-gray-ui-100" />,
  },
];

export const DRAG_AND_DROP_TRAITS_DATA: IDraggableItem[] = [
  {
    id: 1,
    content: <DndTrait title={'Square'} toggleAction={() => console.log('Square')} />,
  },
  {
    id: 2,
    content: <DndTrait title={'Triangle'} toggleAction={() => console.log('Triangle')} />,
  },
  {
    id: 3,
    content: <DndTrait title={'Eyes'} toggleAction={() => console.log('Eyes')} />,
  },
  {
    id: 4,
    content: <DndTrait title={'Pants'} toggleAction={() => console.log('Pants')} />,
  },
];