aeroresolve_frontend/src/app/recoveryIncidents/tabs/CaseDetailsTab.tsx

import { IdentificationCardIcon, AirplaneTiltIcon, WarningCircleIcon } from '@phosphor-icons/react';

export default function CaseDetailsTab() {
  return (
    <div className="flex flex-col gap-4">
      {/* PASSENGER INFORMATION */}
      <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm flex flex-col gap-6">
        <div className="flex items-center gap-2">
          <IdentificationCardIcon size={20} weight="bold" className="text-gray-700" />
          <h3 className="text-[13px] font-bold text-gray-800 tracking-wider">PASSENGER INFORMATION</h3>
        </div>
        
        <div className="grid grid-cols-4 gap-6">
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">FULL NAME</span>
            <span className="block text-[15px] font-semibold text-gray-900">JOHN WICK</span>
          </div>
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">PNR / REFERENCE</span>
            <span className="block text-[15px] font-semibold text-gray-900">XZW34R</span>
          </div>
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">LOYALTY TIER</span>
            <span className="block text-[15px] font-semibold text-[#1B9869]">None</span>
          </div>
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">PASSENGER TYPE</span>
            <span className="block text-[15px] font-semibold text-gray-900">Adult</span>
          </div>
        </div>
      </div>

      {/* FLIGHT JOURNEY */}
      <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm flex flex-col gap-6">
        <div className="flex items-center gap-2">
          <AirplaneTiltIcon size={20} weight="bold" className="text-gray-700" />
          <h3 className="text-[13px] font-bold text-gray-800 tracking-wider">FLIGHT JOURNEY</h3>
        </div>
        
        <div className="grid grid-cols-4 gap-y-6 gap-x-6">
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">FLIGHT NUMBER</span>
            <span className="block text-[15px] font-semibold text-gray-900">Q23SXD</span>
          </div>
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">SECTOR</span>
            <span className="block text-[15px] font-semibold text-gray-900">FRA → JFK</span>
          </div>
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">CABIN</span>
            <span className="block text-[15px] font-semibold text-[#1B9869]">Economy</span>
          </div>
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">DELAY (ARRIVAL)</span>
            <span className="block text-[15px] font-semibold text-gray-900">--</span>
          </div>
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">ORIGINAL CABIN</span>
            <span className="block text-[15px] font-semibold text-gray-900">Economy</span>
          </div>
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">ACTUAL CABIN</span>
            <span className="block text-[15px] font-semibold text-gray-900">Economy</span>
          </div>
        </div>
      </div>

      {/* DISRUPTION DETAILS */}
      <div className="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm flex flex-col gap-6">
        <div className="flex items-center gap-2">
          <WarningCircleIcon size={20} weight="bold" className="text-gray-700" />
          <h3 className="text-[13px] font-bold text-gray-800 tracking-wider">DISRUPTION DETAILS</h3>
        </div>
        
        <div className="grid grid-cols-3 gap-6">
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">DISRUPTION CATEGORY</span>
            <span className="block text-[15px] font-semibold text-gray-900">Travel Exp</span>
          </div>
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">SCENARIO</span>
            <span className="block text-[15px] font-semibold text-gray-900">Denied Boarding</span>
          </div>
          <div>
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">SUB-TYPE</span>
            <span className="block text-[15px] font-semibold text-[#1B9869]">None</span>
          </div>
          <div className="col-span-3">
            <span className="block text-[11px] font-bold text-gray-400 tracking-wider mb-1">ROOT CAUSE ANALYSIS</span>
            <span className="block text-[15px] font-semibold text-gray-900">
              Operational issues resulting in service disruption. Analysis pending manual confirmation.
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}