import { IconButton } from 'components/shared'
import { strokes } from 'state/shape-styles'
import { ColorStyle } from 'types'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { Square } from 'react-feather'
import { DropdownContent } from '../shared'

export default function ColorContent({
  onChange,
}: {
  onChange: (color: ColorStyle) => void
}): JSX.Element {
  return (
    <DropdownContent sideOffset={8} side="bottom">
      {Object.keys(strokes).map((color: ColorStyle) => (
        <DropdownMenu.DropdownMenuItem
          as={IconButton}
          key={color}
          title={color}
          onSelect={() => onChange(color)}
        >
          <Square fill={strokes[color]} stroke="none" size="22" />
        </DropdownMenu.DropdownMenuItem>
      ))}
    </DropdownContent>
  )
}