import React from 'react';
import { Minus, Plus, Check, X } from 'lucide-react';

const QuickNumberPad = ({ 
  onNumberClick, 
  onClear, 
  onBackspace,
  onEnter,
  displayValue,
  showClear = true,
  showBackspace = true
}) => {
  return (
    <div className="grid grid-cols-3 gap-2 max-w-[250px] mx-auto">
      {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (
        <button
          key={num}
          onClick={() => onNumberClick(num.toString())}
          className="h-12 bg-white border border-pos-border rounded-xl hover:bg-primary-50 hover:border-primary-300 hover:text-primary-600 transition-all font-bold text-lg"
        >
          {num}
        </button>
      ))}
      
      {showClear && (
        <button
          onClick={onClear}
          className="h-12 bg-danger/10 text-danger border border-danger/20 rounded-xl hover:bg-danger hover:text-white transition-all font-medium"
        >
          ล้าง
        </button>
      )}
      
      <button
        onClick={() => onNumberClick('0')}
        className="h-12 bg-white border border-pos-border rounded-xl hover:bg-primary-50 hover:border-primary-300 hover:text-primary-600 transition-all font-bold text-lg"
      >
        0
      </button>
      
      {showBackspace && (
        <button
          onClick={onBackspace}
          className="h-12 bg-warning/10 text-warning border border-warning/20 rounded-xl hover:bg-warning hover:text-white transition-all"
        >
          <Minus className="w-5 h-5 mx-auto" />
        </button>
      )}
      
      <button
        onClick={onEnter}
        className="h-12 bg-success text-white border border-success rounded-xl hover:bg-success/90 transition-all flex items-center justify-center"
      >
        <Check className="w-6 h-6" />
      </button>
    </div>
  );
};

export default QuickNumberPad;