import React from 'react';
import { 
  User, 
  Clock, 
  TrendingUp, 
  Settings,
  Tag,
  CreditCard,
  Trash2,
  RefreshCw
} from 'lucide-react';

const QuickActions = ({ onAction }) => {
  const actions = [
    { id: 'customer', icon: User, label: 'ลูกค้า', color: 'bg-blue-50 text-blue-600 hover:bg-blue-100' },
    { id: 'history', icon: Clock, label: 'ประวัติ', color: 'bg-purple-50 text-purple-600 hover:bg-purple-100' },
    { id: 'reports', icon: TrendingUp, label: 'รายงาน', color: 'bg-green-50 text-green-600 hover:bg-green-100' },
    { id: 'discount', icon: Tag, label: 'ส่วนลด', color: 'bg-orange-50 text-orange-600 hover:bg-orange-100' },
    { id: 'refund', icon: RefreshCw, label: 'คืนสินค้า', color: 'bg-red-50 text-red-600 hover:bg-red-100' },
    { id: 'settings', icon: Settings, label: 'ตั้งค่า', color: 'bg-gray-50 text-gray-600 hover:bg-gray-100' },
  ];

  return (
    <div className="grid grid-cols-3 md:grid-cols-6 gap-3 mb-4">
      {actions.map((action) => (
        <button
          key={action.id}
          onClick={() => onAction(action.id)}
          className="flex flex-col items-center gap-2 p-3 rounded-xl bg-white border border-pos-border hover:border-primary-300 hover:shadow-md transition-all duration-200"
        >
          <div className={`w-10 h-10 rounded-full flex items-center justify-center ${action.color}`}>
            <action.icon className="w-5 h-5" />
          </div>
          <span className="text-xs font-medium text-pos-text">{action.label}</span>
        </button>
      ))}
    </div>
  );
};

export default QuickActions;