import React from "react";
import styling from "@devcake/styling";

export type Renderer = (value: string) => (props: { [key: string]: any }) => React.ReactElement;

styling.setDefault("components.icon.svg.stroke.width", "2");
styling.setDefault("components.icon.svg.stroke.linecap", "round");
styling.setDefault("components.icon.svg.stroke.linejoin", "round");

export const svg: Renderer = (path) => (props) => (
  <svg viewBox="0 0 24 24" {...props}>
    <path
      d={path}
      stroke="currentColor"
      fill="none"
      strokeWidth={styling.get("components.icon.svg.stroke.width")}
      strokeLinecap={styling.get("components.icon.svg.stroke.linecap")}
      strokeLinejoin={styling.get("components.icon.svg.stroke.linejoin")}
    />
  </svg>
);