import { recipe } from "@vanilla-extract/recipes";

import { sprinkleValues } from "./sprinkleValues";
import type { Sprinkles } from "./sprinkles.css";
import { sprinkles } from "./sprinkles.css";

type Colors = typeof sprinkleValues.colors;

const color: Colors = Object.keys(sprinkleValues.colors)
  .reduce((acc, key) => {
    acc[key] = sprinkles({
      borderColor: key as Sprinkles["borderColor"],
    });
    return acc;
  }, {} as Colors);

type Radii = typeof sprinkleValues.border.radius;

const radius: Radii = Object.keys(sprinkleValues.border.radius)
  .reduce((acc, key) => {
    acc[key] = sprinkles({
      borderRadius: key as Sprinkles["borderRadius"],
    });
    return acc;
  }, {} as Radii);

export const border = recipe({
  base: [
    sprinkles({
      borderWidth: "standard",
    }),
    {
      borderStyle: "solid",
    },
  ],

  variants: {
    color,
    radius,
  },

  defaultVariants: {
    color: "grey-medium-light",
    radius: "none",
  },
});