import { useClipboard } from '@ark-ui/react/clipboard'
import { css, cva } from '@/styled-system/css'
import { center, flex, grid } from '@/styled-system/patterns'
import type { Token } from '@bamboocss/token-dictionary'

interface ColorGridProps {
  tokens: Token[]
}

export const ColorGrid = (props: ColorGridProps) => {
  const { tokens } = props
  return (
    <div className={grid({ minChildWidth: '11rem', gap: '2', fontSize: 'sm' })}>
      {tokens.map((token, index) => (
        <ColorGridToken token={token} key={index} />
      ))}
    </div>
  )
}

interface ColorGridTokenProps {
  token: Token
}

export const ColorGridToken = (props: ColorGridTokenProps) => {
  const { token } = props
  const { copied, copy } = useClipboard({ value: token.value })
  return (
    <div className={flex({ align: 'center', gap: '8px', cursor: 'pointer' })} onClick={copy}>
      <div className={center({ size: '8', rounded: 'sm' })} style={{ background: token.extensions.varRef }} />
      <div>
        <div className={css({ fontWeight: 'medium' })}>{token.extensions.prop}</div>
        <div className={colorTokenValue({ copied })}>{token.value}</div>
      </div>
    </div>
  )
}

const colorTokenValue = cva({
  base: {
    opacity: '0.6',
  },
  variants: {
    copied: {
      true: {
        opacity: '1',
        color: 'green.500',
      },
    },
  },
})
