import type { Meta, StoryObj } from '@storybook/react'
import { List, ListItem, ListSubheader, ListDivider } from './List'

const HomeIcon = () => (
  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></svg>
)
const StarIcon = () => (
  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" /></svg>
)
const SettingsIcon = () => (
  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 00.12-.61l-1.92-3.32a.488.488 0 00-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 00-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 00-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1115.6 12 3.6 3.6 0 0112 15.6z" /></svg>
)

const meta: Meta<typeof List> = {
  title: 'Atoms/List',
  component: List,
  tags: ['autodocs'],
  parameters: { layout: 'padded' },
}

export default meta
type Story = StoryObj<typeof List>

export const Default: Story = {
  render: () => (
    <List className="w-80 rounded-default shadow-default">
      <ListItem icon={<HomeIcon />}>Real-Time</ListItem>
      <ListItem icon={<StarIcon />}>Audience</ListItem>
      <ListItem icon={<SettingsIcon />}>Conversions</ListItem>
    </List>
  ),
}

export const WithActive: Story = {
  name: 'With active item',
  render: () => (
    <List className="w-80 rounded-default shadow-default">
      <ListItem icon={<HomeIcon />} active>Real-Time</ListItem>
      <ListItem icon={<StarIcon />}>Audience</ListItem>
      <ListItem icon={<SettingsIcon />}>Conversions</ListItem>
    </List>
  ),
}

export const WithSubheaders: Story = {
  name: 'With subheaders',
  render: () => (
    <List className="w-80 rounded-default shadow-default">
      <ListSubheader>Reports</ListSubheader>
      <ListItem icon={<HomeIcon />}>Real-Time</ListItem>
      <ListItem icon={<StarIcon />}>Audience</ListItem>
      <ListDivider />
      <ListSubheader>Settings</ListSubheader>
      <ListItem icon={<SettingsIcon />}>Preferences</ListItem>
    </List>
  ),
}
