import React from 'react';
import chroma from "chroma-js";
import styles from "../styles/exos/Tag.module.scss";

import { css, Global, keyframes } from "@emotion/react";
//import styled from "@emotion/styled";

export default function Tag({tag, onDelete}){
  //console.log(ref, 'porpos')
  const colorChrome = chroma(tag.color);
  return (
    <div
      css={css`
        background-color: ${colorChrome.alpha(0.1).css()};
        border-radius: 4px;
        color: ${colorChrome.css()};
        display: flex;
        box-sizing: border-box;
        width: max-content;
        padding-right: ${!onDelete ? '6px': "3px"}
      `}
      className={styles.tag}
    >
      <div className={styles["tag-label"]}>{tag.name}</div>
      {onDelete && <div
        className={styles["tag-remove"]}
        css={css`
          color: ${colorChrome.css()};
          &:hover {
            color: white;
            background-color: ${colorChrome.css()};
          }
        `}
        onClick={() => {
          onDelete && onDelete(tag.id_code);
        }}
      >
        <svg
          height="14"
          width="14"
          viewBox="0 0 20 20"
          aria-hidden="true"
          focusable="false"
        >
          <path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
        </svg>
      </div>}
    </div>
  );
}