import React from 'react';
import { Palette } from 'lucide-react';

const InputTextWithColorIcon = ({
  name,
  textValue,
  colorValue,
  onTextChange,
  onColorChange,
  placeholder,
  errorMsg,
}) => {
  return (
    <div className="flex items-center space-x-2">
      <input
        type="text"
        name={name}
        value={textValue}
        onChange={onTextChange}
        placeholder={placeholder}
        className={`flex-1 px-2 py-1 border ${errorMsg ? 'border-red-500' : 'border-gray-300'} rounded-md`}
      />
      <div className="relative flex items-center space-x-2">
        <input
          type="color"
          name={`${name}_color`}
          value={colorValue}
          onChange={onColorChange}
          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
        />
        <Palette className="w-6 h-6 text-gray-500" />
        <div
          className="w-6 h-6 rounded-full border border-gray-300"
          style={{ backgroundColor: colorValue }}
        ></div>
      </div>
      {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
    </div>
  );
};

export default InputTextWithColorIcon;