import React from 'react';
import Stack from '../Layout/Stack/index.jsx';
import { Text } from '../Text';
import List from '.';

export default {
  title: 'Components|List',
  component: List,
};

export const index = () => (
  <Stack gap="medium">
    <Text>Ordered List (Default)</Text>
    <List>
      <li>First item in the list</li>
      <li>Second item in the list</li>
      <li>Third item in the list</li>
    </List>

    <Text>Unordered List</Text>
    <List type="unordered">
      <li>First item in the list</li>
      <li>Second item in the list</li>
      <li>Third item in the list</li>
    </List>
  </Stack>
);

export const ColorVariants = () => (
  <Stack gap="medium">
    <Text>Default Color (Dark Neutral 1)</Text>
    <List>
      <li>First item in the list</li>
      <li>Second item in the list</li>
      <li>Third item in the list</li>
    </List>

    <Text>Blue Color</Text>
    <List color="Blue">
      <li>First item in the list</li>
      <li>Second item in the list</li>
      <li>Third item in the list</li>
    </List>

    <Text>Orange Color</Text>
    <List color="Orange">
      <li>First item in the list</li>
      <li>Second item in the list</li>
      <li>Third item in the list</li>
    </List>

    <Text>Green Color</Text>
    <List color="Green">
      <li>First item in the list</li>
      <li>Second item in the list</li>
      <li>Third item in the list</li>
    </List>

    <Text>Red Color</Text>
    <List color="Red">
      <li>First item in the list</li>
      <li>Second item in the list</li>
      <li>Third item in the list</li>
    </List>
  </Stack>
);

export const NestedLists = () => (
  <Stack gap="medium">
    <Text>Nested Lists</Text>
    <List>
      <li>First level item 1</li>
      <li>
        First level item 2
        <List type="unordered" color="Blue">
          <li>Second level item 1</li>
          <li>Second level item 2</li>
          <li>
            Second level item 3
            <List type="ordered" color="Orange">
              <li>Third level item 1</li>
              <li>Third level item 2</li>
            </List>
          </li>
        </List>
      </li>
      <li>First level item 3</li>
    </List>
  </Stack>
);