import classNames from 'classnames';
import {StyleColorVariants, StyleColorVariantsMap} from 'core/_variants';
import React from 'react';

type Props = {
  variant: StyleColorVariants;
  children: React.ReactNode;
};

const markerVariant: StyleColorVariantsMap<string> = {
  gray: 'bg-gray-500 shadow-gray-500',
  blue: 'bg-blue-500 shadow-blue-500',
  pink: 'bg-pink-500 shadow-pink-500',
  red: 'bg-red-500 shadow-red-500',
  purple: 'bg-purple-500 shadow-purple-500',
  yellow: 'bg-yellow-500 shadow-yellow-500',
  emerald: 'bg-emerald-500 shadow-emerald-500',
  sky: 'bg-sky-500 shadow-sky-500',
  "dark-coral": "bg-dark-coral-500 shadow-dark-coral-500",
};

/**
 * Cirlce shape to wrap [children]
 * @param {React.ReactNode} children Children to paste inside circle shape
 * @param {StyleColorVariants} variant Varant of marker
 * @return {JSX.Element}
 */
export default function CircleMarker({variant, children}: Props) {
  return (
    <div
      className={classNames([
        'w-11 h-11 rounded-full shadow-xl flex items-center justify-center p-3',
        markerVariant[variant],
      ])}
    >
      {children}
    </div>
  );
}