import * as stylex from "@stylexjs/stylex";

import type { Color } from "./ThemeContext";

import { radius } from "../components/theme/radius.stylex";
import { size as sizeSpace } from "../components/theme/semantic-spacing.stylex";
import { allColors } from "./ThemeContext";

const styles = stylex.create({
  dot: {
    borderRadius: radius.full,
    alignItems: "center",
    height: sizeSpace["2xl"],
    width: sizeSpace["2xl"],
  },
  preview: (color: Color) => ({
    // oxlint-disable-next-line @stylexjs/valid-styles
    backgroundColor: allColors[color].solid1,
  }),
});

export const ColorPreview = ({ color }: { color: Color }) => {
  return <div {...stylex.props(styles.dot, styles.preview(color))} />;
};