import { ElevationToken } from "../../Elevation/types";
import createBoxShadows from "./createBoxShadows";

const mockShadow: ElevationToken["data"] = [
  {
    type: "DROP_SHADOW",
    visible: true,
    blendMode: "NORMAL",
    color: {
      r: 0,
      g: 0.2235,
      b: 0.2549,
      a: 0.08,
    },
    offset: {
      x: 0,
      y: 0,
    },
    radius: 0,
    spread: 1,
  },
  {
    type: "DROP_SHADOW",
    visible: true,
    blendMode: "NORMAL",
    color: {
      r: 0,
      g: 0.2235,
      b: 0.2549,
      a: 0.32,
    },
    offset: {
      x: 0,
      y: 4,
    },
    radius: 4,
    spread: -4,
  },
];

describe("createBoxShadows", () => {
  it("Creates a CSS-compliant box shadow value based on the design token input", () => {
    const output = createBoxShadows(mockShadow);
    expect(output).toEqual(
      "0 0 0 1px rgba(0, 57, 65, 0.08), 0 4px 4px -4px rgba(0, 57, 65, 0.32)"
    );
  });
});