import React, { forwardRef } from 'react';
import { Group, Rect, Text } from 'react-konva';
import { ShapeConfig } from 'konva/lib/Shape';

interface ChipProps extends ShapeConfig {
  id: string;
  x: number;
  y: number;
  width: number;
  height: number;
  label: string;
  fillColor?: string;
  textColor?: string;
}

export const Chip = forwardRef<any, ChipProps>(
  ({ x, y, width, height, label, fillColor = 'lightgray', textColor = 'black', id, ...shapeProps }, ref) => {
    const padding = 10;

    return (
      <Group x={x} y={y} ref={ref} {...shapeProps}>
        {/* Fondo del chip/badge */}
        <Rect
          x={0}
          y={0}
          width={width}
          height={height}
          fill={fillColor}
          stroke="gray"
          strokeWidth={2}
          cornerRadius={height / 2}  // Para hacer las esquinas redondeadas
        />

        {/* Texto del chip/badge */}
        <Text
          x={padding}
          y={height / 2 - 8}  // Centrar verticalmente
          text={label}
          fontFamily="Arial"
          fontSize={16}
          fill={textColor}
        />
      </Group>
    );
  }
);

export default Chip;