import { ColorPicker, parseColor } from '@ark-ui/solid/color-picker'
import { Check } from 'lucide-solid'
import { For } from 'solid-js'
import styles from 'styles/color-picker.module.css'

const swatches = ['red', 'blue', 'green', 'orange']

export const Inline = () => {
  return (
    <ColorPicker.Root class={styles.Root} inline defaultValue={parseColor('#eb5e41')}>
      <ColorPicker.Area class={styles.Area}>
        <ColorPicker.AreaBackground class={styles.AreaBackground} />
        <ColorPicker.AreaThumb class={styles.AreaThumb} />
      </ColorPicker.Area>

      <ColorPicker.SwatchGroup class={styles.SwatchGroup}>
        <For each={swatches}>
          {(color) => (
            <ColorPicker.SwatchTrigger class={styles.SwatchTrigger} value={color}>
              <ColorPicker.Swatch class={styles.Swatch} value={color}>
                <ColorPicker.SwatchIndicator class={styles.SwatchIndicator}>
                  <Check />
                </ColorPicker.SwatchIndicator>
              </ColorPicker.Swatch>
            </ColorPicker.SwatchTrigger>
          )}
        </For>
      </ColorPicker.SwatchGroup>
    </ColorPicker.Root>
  )
}
