import React from 'react'
import { Button } from '../button'
import { Icon } from '../icons/Icon.jsx'
import { Text } from '../text'
import { List } from './List.jsx'

export default {
  title: 'Design System/Display/List',
  component: List,
  parameters: {
    docs: {
      description: {
        component:
          'Vertical list container for storage-style resource rows. Use `List.Item` for each row — compact (56px) or comfortable density.',
      },
    },
  },
}

export const Default = () => (
  <List surface="primary" roundness="m" style={{ maxWidth: 480 }}>
    <List.Item
      leading={<Icon name="folder" size="s" />}
      meta={<Text variant="small">2.4 MB</Text>}
      trailing={<Button variant="link" prefix="options" aria-label="Row actions" />}
    >
      Project brief.pdf
    </List.Item>
    <List.Item
      leading={<Icon name="file" size="s" />}
      meta={<Text variant="small">128 KB</Text>}
      trailing={<Button variant="link" prefix="options" aria-label="Row actions" />}
    >
      Notes.md
    </List.Item>
    <List.Item
      leading={<Icon name="folder" size="s" />}
      trailing={<Button variant="link" prefix="options" aria-label="Row actions" />}
    >
      Archive
    </List.Item>
  </List>
)

export const Selectable = () => (
  <List surface="primary" roundness="m" style={{ maxWidth: 480 }}>
    <List.Item selectable leading={<Icon name="mail" size="s" />}>
      Inbox
    </List.Item>
    <List.Item selectable selected leading={<Icon name="mail" size="s" />}>
      Selected row
    </List.Item>
    <List.Item selectable leading={<Icon name="mail" size="s" />}>
      Sent
    </List.Item>
  </List>
)

export const Comfortable = () => (
  <List surface="primary" roundness="m" style={{ maxWidth: 520 }}>
    <List.Item
      density="comfortable"
      leading={<Icon name="profile" size="m" />}
      meta={<Text variant="small">Last active 2h ago</Text>}
    >
      <Text variant="heading-tertiary">Alex Rivera</Text>
    </List.Item>
    <List.Item
      density="comfortable"
      leading={<Icon name="profile" size="m" />}
      meta={<Text variant="small">Invited</Text>}
    >
      <Text variant="heading-tertiary">Sam Chen</Text>
    </List.Item>
  </List>
)

export const WithLinks = () => (
  <List surface="primary" roundness="m" style={{ maxWidth: 480 }}>
    <List.Item href="#" leading={<Icon name="home" size="s" />}>
      Dashboard
    </List.Item>
    <List.Item href="#" leading={<Icon name="user-list" size="s" />}>
      Team members
    </List.Item>
  </List>
)