import React from 'react';

const hexToRgbA = (hex = 'FFFFFF') => {
  let c: any;
  if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
    c = hex.substring(1).split('');
    if (c.length === 3) {
      c = [c[0], c[0], c[1], c[1], c[2], c[2]];
    }
    c = '0x' + c.join('');
    return (
      'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',1)'
    );
  }
  return 'Bad Hex';
};

interface SwatchTypes {
  colors: any;
  colorGroup: string;
  k: string;
}

const ColorSwatch = ({ colors, colorGroup, k }: SwatchTypes) => {
  try {
    return (
      <section className="bg-white w-[190px] inline-block drop-shadow-lg rounded-bl-xl rounded-tr-xl overflow-hidden transition-all hover:drop-shadow-xl hover:scale-110">
        <div
          style={{ background: `${colors[colorGroup][k]}` }}
          className={`w-full h-[50px] bg-_-${colorGroup}-${k}`}
        />
        <div className="text-xs px-1 py-2 flex flex-col text-slate-500">
          <div className="flex justify-between">
            <span>{k}</span>
            <span>{colors[colorGroup][k].toUpperCase()}</span>
          </div>
          <span className="text-[8px] text-right">
            {hexToRgbA(colors[colorGroup][k])}
          </span>
          <span className="text-[8px] text-right">
            bg-_-{colorGroup}-{k}
          </span>
        </div>
      </section>
    );
  } catch (err) {
    return <div>Error</div>;
  }
};
export default ColorSwatch;