import React from 'react'
import { View } from '../view/View.jsx'
import { Text } from '../text/Text.jsx'
import { Icons, Icon } from './Icon.jsx'

export default {
  title: 'Design System/Display/Icon',
  component: Icon,
  parameters: {
    layout: 'centered',
  },
  argTypes: {
    size: {
      options: ['s', 'm', 'l', 'xl'],
      control: { type: 'select' },
    },
    name: {
      control: { type: 'text' },
    },
  },
}

export const Default = {
  args: {
    name: 'folder',
  },
}

export const Library = {
  args: {
    size: 'm',
  },
  render: ({ size }) => (
    <View layout="row-wrap" gap="l">
      {Object.keys(Icons).map((name) => (
        <View key={name} gap="s" justifyContent="center" alignItems="center">
          <View
            surface="primary"
            inset="m"
            roundness="s"
            style={{ border: '1px solid var(--separator-primary)' }}
          >
            <Icon name={name} size={size} />
          </View>
          <Text>{name}</Text>
        </View>
      ))}
    </View>
  ),
}