'use client';

import { useRouter } from 'next/navigation';
import type { Machine } from '@/lib/types';

interface MachineListProps {
  machines: Machine[];
  tenantId: string;
  onEdit: (machine: Machine) => void;
  onDelete: (machine: Machine) => void;
}

export function MachineList({ machines, tenantId, onEdit, onDelete }: MachineListProps) {
  const router = useRouter();

  return (
    <div className="machine-grid">
      {machines.map((machine) => (
        <div key={machine.id} className="machine-card">
          <div
            className="machine-card-body"
            onClick={() => router.push(`/${tenantId}/machines/${machine.id}`)}
          >
            <div className="machine-card-icon">
              <span className="material-symbols-outlined">precision_manufacturing</span>
            </div>
            <div className="machine-card-info">
              <h3 className="machine-card-name">{machine.name}</h3>
              <span className="machine-card-code">{machine.equipment_code}</span>
              {machine.model && (
                <span className="machine-card-model">{machine.model}</span>
              )}
            </div>
            <div className="machine-card-meta">
              <div className="machine-card-parts">
                <span className="material-symbols-outlined">settings</span>
                <span>부품 {machine.parts_count}개</span>
              </div>
            </div>
          </div>
          <div className="machine-card-actions">
            <button
              className="btn-icon"
              onClick={(e) => { e.stopPropagation(); onEdit(machine); }}
              title="수정"
            >
              <span className="material-symbols-outlined">edit</span>
            </button>
            <button
              className="btn-icon btn-icon-danger"
              onClick={(e) => { e.stopPropagation(); onDelete(machine); }}
              title="삭제"
            >
              <span className="material-symbols-outlined">delete</span>
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}