'use client';

export default function SampleTrackingSection() {
  const samples = [
    {
      id: 'SMP-1001',
      patient: 'John Doe',
      test: 'Blood Test',
      status: 'In Transit',
      expected: '2025-05-10',
    },
    {
      id: 'SMP-1002',
      patient: 'Jane Smith',
      test: 'Urine Test',
      status: 'Received',
      expected: '2025-05-09',
    },
    {
      id: 'SMP-1003',
      patient: 'Mark Johnson',
      test: 'X-ray',
      status: 'Processing',
      expected: '2025-05-08',
    },
  ];

  return (
    <div className="bg-white p-6 rounded-2xl shadow-md">
      <h2 className="text-xl font-semibold mb-4">Sample Tracking</h2>
      <div className="overflow-x-auto">
        <table className="min-w-full table-auto border-collapse">
          <thead>
            <tr className="bg-gray-100">
              <th className="px-4 py-2 text-left">Sample ID</th>
              <th className="px-4 py-2 text-left">Patient</th>
              <th className="px-4 py-2 text-left">Test</th>
              <th className="px-4 py-2 text-left">Status</th>
              <th className="px-4 py-2 text-left">Expected Date</th>
            </tr>
          </thead>
          <tbody>
            {samples.map((sample, idx) => (
              <tr key={idx} className="border-t">
                <td className="px-4 py-2">{sample.id}</td>
                <td className="px-4 py-2">{sample.patient}</td>
                <td className="px-4 py-2">{sample.test}</td>
                <td className="px-4 py-2">
                  <span
                    className={`px-2 py-1 rounded-full text-sm font-medium ${
                      sample.status === 'In Transit'
                        ? 'bg-blue-100 text-blue-700'
                        : sample.status === 'Received'
                        ? 'bg-green-100 text-green-700'
                        : 'bg-yellow-100 text-yellow-700'
                    }`}
                  >
                    {sample.status}
                  </span>
                </td>
                <td className="px-4 py-2">{sample.expected}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}
