Chip - Customizable Badge Component

'use client';
import { useState } from 'react';

interface IChip {
  label: string;
  id: string;
  border?: string;
  borderColor?: string;
  textColor?: string;
  bgColor?: string;
  isRounded?: boolean;
}

const getBorderClass = (border: string | undefined) => {
  switch (border) {
    case 'left':
      return 'border-l-4';
    case 'right':
      return 'border-r-4';
    case 'top':
      return 'border-t-4';
    case 'bottom':
      return 'border-b-4';
    default:
      return '';
  }
}

export default function Chip({
  chipData = { label: 'Sample Chip', id: 'sample-chip' },
  border,
  borderColor,
  textColor,
  bgColor,
  isRounded = true,
}: {
  chipData?: IChip;
  border?: string;
  borderColor?: string;
  textColor?: string;
  bgColor?: string;
  isRounded?: boolean;
}) {

  return (
    <>
      <span className="text-gray-400 inline-flex items-center leading-none text-sm pr-0 py-1 mr-2 cursor-pointer">
        <span
          className={`bg-white dark:bg-gray-800 tracking-wide text-gray-800 dark:text-white font-bold shadow-md py-1 px-4 inline-flex items-center border-slate-600 border ${getBorderClass(border)} ${isRounded ? 'rounded-full' : 'rounded'}`}
          style={{
            borderColor: borderColor,
            backgroundColor: bgColor ? bgColor : '#FFFFFF',
            color: textColor ? textColor : '#2D3748',
          }}
        >
          <span className="mx-auto flex items-center">
            {/* <img className="mr-2" src="/images/num_heart.gif" alt="calender-icon" width="18" /> */}
            {chipData.label}
          </span>
        </span>
      </span>
    </>
  );
}