import React from "react";
import { cn } from "@/lib/utils";
import {
  AccountListCarousel,
  type AccountCarouselItem,
} from "./account-list-carousel";
import {
  PropertyListCarousel,
  type PropertyCarouselItem,
} from "./property-list-carousel";

export interface LoanFinancialsProps {
  /** Name shown in the section heading (e.g. applicant's first name) */
  ownerName: string;
  bankAccounts: AccountCarouselItem[];
  creditAccounts: AccountCarouselItem[];
  propertyLoans: AccountCarouselItem[];
  properties: PropertyCarouselItem[];
  onAddAccount?: () => void;
  onAddProperty?: () => void;
  className?: string;
}

function SectionTitle({ children }: { children: React.ReactNode }) {
  return <p className="text-sm font-semibold text-foreground">{children}</p>;
}

export function LoanFinancials({
  ownerName,
  bankAccounts,
  creditAccounts,
  propertyLoans,
  properties,
  onAddAccount,
  onAddProperty,
  className,
}: LoanFinancialsProps) {
  return (
    <div className={cn("flex flex-col gap-6", className)}>
      <p className="text-sm font-bold text-foreground">
        {ownerName}&apos;s Information
      </p>

      <div className="flex flex-col gap-2">
        <SectionTitle>Linked Bank Accounts</SectionTitle>
        <AccountListCarousel
          accounts={bankAccounts}
          type="bankAccount"
          onAddAccount={onAddAccount}
        />
      </div>

      <div className="flex flex-col gap-2">
        <SectionTitle>Credit Cards &amp; Personal Loans</SectionTitle>
        <AccountListCarousel
          accounts={creditAccounts}
          type="credit"
          onAddAccount={onAddAccount}
        />
      </div>

      <div className="flex flex-col gap-2">
        <SectionTitle>Property Loans</SectionTitle>
        <AccountListCarousel accounts={propertyLoans} type="propertyLoan" />
      </div>

      <div className="flex flex-col gap-2">
        <SectionTitle>Property Assets</SectionTitle>
        <PropertyListCarousel
          properties={properties}
          type="property"
          onAddProperty={onAddProperty}
        />
      </div>
    </div>
  );
}