import { List } from './List';
import { Avatar } from '../../Atoms/Avatar/Avatar';

export default {
  title: 'DataDisplay/List',
  component: List,
  tags: ['autodocs'],
};

export const Default = {
  args: {
    items: [
      'Elemento 1',
      'Elemento 2',
      'Elemento 3',
      'Elemento 4',
    ],
  },
};

export const WithCustomItems = {
  args: {
    items: [
      <div key="1" className="flex items-center space-x-3">
        <Avatar name="John Doe" size="small" />
        <div>
          <p className="font-medium">John Doe</p>
          <p className="text-sm text-gray-500">john@example.com</p>
        </div>
      </div>,
      <div key="2" className="flex items-center space-x-3">
        <Avatar name="Jane Smith" size="small" />
        <div>
          <p className="font-medium">Jane Smith</p>
          <p className="text-sm text-gray-500">jane@example.com</p>
        </div>
      </div>,
      <div key="3" className="flex items-center space-x-3">
        <Avatar name="Bob Johnson" size="small" />
        <div>
          <p className="font-medium">Bob Johnson</p>
          <p className="text-sm text-gray-500">bob@example.com</p>
        </div>
      </div>,
    ],
  },
};

export const WithoutDividers = {
  args: {
    items: [
      'Elemento 1',
      'Elemento 2',
      'Elemento 3',
    ],
    variant: 'none',
  },
};

