'use client';

export default function UpcomingSamplesSection() {
  const samples = [
    {
      name: 'John Doe',
      test: 'Blood Test',
      date: '2025-05-05',
    },
    {
      name: 'Jane Smith',
      test: 'Urine Test',
      date: '2025-05-06',
    },
    {
      name: 'Mark Johnson',
      test: 'X-ray',
      date: '2025-05-07',
    },
  ];

  return (
    <div className="bg-white p-6 rounded-2xl shadow-md">
      <h2 className="text-xl font-semibold mb-4">Upcoming Samples</h2>
      <div className="space-y-4">
        {samples.map((sample, idx) => (
          <div key={idx} className="p-4 border rounded-lg hover:shadow transition">
            <div className="flex justify-between items-center">
              <div>
                <p className="font-semibold">{sample.name}</p>
                <p className="text-sm text-gray-600">{sample.test}</p>
              </div>
              <div className="text-sm text-gray-700">{sample.date}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
