import React from 'react';
import { Text, Row } from 'components';
import styled from '@emotion/native';
import { color, ThemedBackgroundColorProps } from 'styled-system';
import { ColorName } from '@emotion/react';
import { COLOR_DARK } from './color';

export default {
  title: 'Design System/Theme/Color',
};

interface ColorBlockProps {
  color: ColorName;
}

// use `ThemedBackgroundColorProps` to further scope the props to only allow `backgroundColor`
const Swatch = styled.View<ThemedBackgroundColorProps>(
  {
    height: 56,
    width: 56,
    marginRight: 16,
    borderRadius: 8,
  },
  color
);

const ColorBlock: React.FC<ColorBlockProps> = ({ color: colorName }) => {
  return (
    <Row alignItems="center" width={250} mb="2xs" bg="base">
      <Swatch bg={colorName} />
      <Text variant="body">{colorName}</Text>
    </Row>
  );
};

export const Variants: React.FC = () => {
  const colorNames = Object.keys(COLOR_DARK) as ColorName[];

  return (
    <Row flexWrap="wrap">
      {colorNames.map((c) => (
        <ColorBlock key={c as string} color={c} />
      ))}
    </Row>
  );
};