import React from "react";
import { DebtIntelligenceData } from "@/hooks/useDebtIntelligenceReport";

interface UserInfoCardProps {
  data: DebtIntelligenceData;
}

export const UserInfoCard: React.FC<UserInfoCardProps> = ({ data }) => {
  const firstName = data.customer?.first_name || "N/A";
  const lastName = data.customer?.last_name || "N/A";
  const currentDate = new Date().toLocaleDateString('en-GB');
  const valueAsOf = data.model?.value_date || currentDate;

  return (
    <div className="mb-6 rounded-lg border border-slate-200 bg-white shadow-sm p-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div>
          <div className="text-xs font-semibold text-slate-500 uppercase mb-1">First Name</div>
          <div className="text-lg font-medium text-slate-900">{firstName}</div>
        </div>
        <div>
          <div className="text-xs font-semibold text-slate-500 uppercase mb-1">Last Name</div>
          <div className="text-lg font-medium text-slate-900">{lastName}</div>
        </div>
        <div>
          <div className="text-xs font-semibold text-slate-500 uppercase mb-1">Current Date</div>
          <div className="text-lg font-medium text-slate-900">{currentDate}</div>
        </div>
      </div>
      <div className="mt-4 pt-4 border-t border-slate-200">
        <div className="text-xs font-semibold text-slate-500 uppercase mb-1">Value As Of</div>
        <div className="text-sm text-slate-700">{valueAsOf}</div>
      </div>
      <div className="mt-4 pt-4 border-t border-slate-200">
        <div className="text-xs font-semibold text-slate-500 uppercase mb-1">Bank</div>
        <div className="text-sm text-slate-700">
          {data.selected_banks.map(b => b.bank_name).join(', ')}
        </div>
      </div>
    </div>
  );
};