import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React from "react";
import classnames from "classnames";
import useTheme from "../../hooks/useTheme";
import isThemePalette from "../../utils/isThemePalette";
import opacity from "../../utils/opacity";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Link = props => {
  const theme = useTheme();
  const {
    color = "primary",
    component = "a",
    children,
    className = null,
    ...otherProps
  } = props;
  const Component = component ? component : "a";

  function handleColor() {
    if (!color) return `color: ${theme.palette.text};`;

    switch (color) {
      case "text":
        return `color: ${theme.palette.text};`;

      case "subtext":
        return `color: ${theme.palette.subtext};`;

      default:
        return `color: ${isThemePalette(color) ? theme.palette[color][500] : color};`;
    }
  }

  function handleColorHover() {
    if (!color) return `color: ${theme.palette.text};`;

    switch (color) {
      case "text":
        return `color: ${opacity(theme.palette.text, 50)};`;

      case "subtext":
        return `color: ${opacity(theme.palette.subtext, 50)};`;

      default:
        return `color: ${isThemePalette(color) ? opacity(theme.palette[color][500], 50) : opacity(color, 50)};`;
    }
  }

  return /*#__PURE__*/_jsxs(Component, {
    "data-testid": "Wps-Link",
    ...otherProps,
    className: _JSXStyle.dynamic([["2126543404", [handleColor(), handleColorHover()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || classnames("Wps-Link", className) || ""),
    children: [/*#__PURE__*/_jsx(_JSXStyle, {
      id: "2126543404",
      dynamic: [handleColor(), handleColorHover()],
      children: `.Wps-Link.__jsx-style-dynamic-selector{${handleColor()} transition:all 250ms ease 0ms;}.Wps-Link.__jsx-style-dynamic-selector:hover{${handleColorHover()};}`
    }), children]
  });
};