import React from 'react'

import { replaceDelimiter } from '../../services/HelperServiceTyped'
import CopyToClipBoard from '../../storybook/StorybookHelpers/templates/CopyToClipBoard'
import { ColorTile } from '../ColorLookup/ColorLookup'
import SectionHeader from '../Form/SectionHeader/SectionHeader'

type ColorPaletteProps = {
  colorGroups: Array<{
    groupName: string
    colors: Array<{
      name: string
      value: string
      whiteFont?: boolean
      hasBorder?: boolean
    }>
  }>
}

const ColorPalette = ({
  colorGroups,
}: ColorPaletteProps): React.JSX.Element => {
  return (
    <div className='grid auto-rows-max grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4'>
      {colorGroups.map((group, groupIndex) => (
        <React.Fragment key={group.groupName}>
          <div className='col-span-full'>
            <SectionHeader title={group.groupName} />
          </div>
          {group.colors.map((color) => (
            <CopyToClipBoard key={color.name} text={`var(${color.value})`}>
              <ColorTile
                title={replaceDelimiter({
                  text: color.name,
                  joinOption: '-',
                  splitSymbol: ' ',
                  keepCasing: false,
                })}
                variableName={color.value}
              />
            </CopyToClipBoard>
          ))}
        </React.Fragment>
      ))}
    </div>
  )
}

export default ColorPalette