krishna_sales/src/components/dv/PotentialMiningTable.tsx

import { ArrowUpRight, ArrowDownRight, Pencil, Trash2 } from 'lucide-react';
import { cn } from '../../lib/cn';

export interface MiningItem {
  id: string;
  productName: string;
  badge?: {
    label: string;
    type: 'error' | 'success' | 'info' | 'warning' | 'default';
  };
  status?: string;
  potentialKgs: number;
  orderedKgs: number;
}

export interface PotentialMiningTableProps {
  data: MiningItem[];
  onEdit?: (item: MiningItem) => void;
  onDelete?: (item: MiningItem) => void;
  hideOrderDetails?: boolean;
}

export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails }: PotentialMiningTableProps) {
  return (
    <div className="w-full bg-white rounded-lg shadow-sm border border-slate-200 overflow-x-auto">
      <table className="w-full text-sm text-left whitespace-nowrap">
        <thead className="bg-slate-100 border-b border-slate-200 text-[11px] font-bold text-slate-700 uppercase tracking-wider">
          <tr>
            <th className="px-6 py-4">Product</th>
            <th className="px-6 py-4 text-center">Potential (Kgs)</th>
            {!hideOrderDetails && (
              <>
                <th className="px-6 py-4 text-center">Ordered (Kgs)</th>
                <th className="px-6 py-4 text-center">Difference</th>
              </>
            )}
            {(onEdit || onDelete) && (
              <th className="px-6 py-4 text-center">Actions</th>
            )}
          </tr>
        </thead>
        <tbody className="divide-y divide-slate-100">
          {data.map((item) => {
            const difference = item.orderedKgs - item.potentialKgs;
            const isSurplus = difference >= 0;
            const absDiff = Math.abs(difference);

            return (
              <tr key={item.id} className="hover:bg-slate-50 transition-colors bg-white group">
                <td className="px-6 py-4">
                  <div className="flex items-center gap-3">
                    <span className="font-normal text-slate-600 text-sm">{item.productName}</span>
                    {item.badge && (
                      <span className={cn(
                        "px-2 py-0.5 rounded text-[11px] font-semibold whitespace-nowrap",
                        item.badge.type === 'error' && "bg-red-50 text-red-500",
                        item.badge.type === 'success' && "bg-emerald-50 text-emerald-600",
                        item.badge.type === 'info' && "bg-blue-50 text-blue-500",
                        item.badge.type === 'warning' && "bg-amber-50 text-amber-600",
                        item.badge.type === 'default' && "bg-slate-100 text-slate-600"
                      )}>
                        {item.badge.label}
                      </span>
                    )}
                  </div>
                </td>
                <td className="px-6 py-4 text-center text-slate-600 font-normal text-base">
                  {item.potentialKgs}
                </td>
                {!hideOrderDetails && (
                  <>
                    <td className="px-6 py-4 text-center text-slate-600 font-normal text-base">
                      {item.orderedKgs}
                    </td>
                    <td className="px-6 py-4">
                      <div className="flex justify-center">
                        <div className={cn(
                          "flex flex-col items-center justify-center min-w-[110px] px-3 py-1.5 rounded-md border",
                          isSurplus ? "bg-emerald-50/50 border-emerald-100" : "bg-red-50/50 border-red-100"
                        )}>
                          <div className={cn(
                            "flex items-center gap-1 font-bold text-sm",
                            isSurplus ? "text-emerald-700" : "text-red-600"
                          )}>
                            {isSurplus ? (
                              <ArrowUpRight size={16} strokeWidth={2.5} />
                            ) : (
                              <ArrowDownRight size={16} strokeWidth={2.5} />
                            )}
                            <span>{absDiff} Kgs</span>
                          </div>
                          <span className={cn(
                            "text-[11px] font-medium mt-0.5",
                            isSurplus ? "text-emerald-600/80" : "text-red-500/80"
                          )}>
                            {isSurplus ? 'Surplus' : 'Shortfall'}
                          </span>
                        </div>
                      </div>
                    </td>
                  </>
                )}
                {(onEdit || onDelete) && (
                  <td className="px-6 py-4">
                    <div className="flex items-center justify-center gap-3 opacity-80 group-hover:opacity-100 transition-opacity">
                      {onEdit && (
                        <button 
                          type="button"
                          onClick={() => onEdit(item)}
                          className="p-2 text-blue-500 hover:text-blue-600 hover:bg-blue-50 rounded border border-blue-100 transition-colors shadow-sm"
                          title="Edit"
                        >
                          <Pencil size={15} />
                        </button>
                      )}
                      {onDelete && (
                        <button 
                          type="button"
                          onClick={() => onDelete(item)}
                          className="p-2 text-red-500 hover:text-red-600 hover:bg-red-50 rounded border border-red-100 transition-colors shadow-sm"
                          title="Delete"
                        >
                          <Trash2 size={15} />
                        </button>
                      )}
                    </div>
                  </td>
                )}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}