import React from "react";
import { cn } from "@/lib/utils";
import { formatCurrency } from "@/lib/format-currency";
import { Button } from "./button";
import { Plus } from "lucide-react";

export type PropertyCarouselType = "homeLoan" | "property";

export interface PropertyCarouselItem {
  id: string;
  address: string;
  /** Estimated value or equity */
  value: number;
  /** Linked loan balance, if any */
  loanBalance?: number;
}

export interface PropertyListCarouselProps {
  properties: PropertyCarouselItem[];
  type: PropertyCarouselType;
  /** When provided, shows an "Add Property" button at the end (property type only) */
  onAddProperty?: () => void;
  className?: string;
}

function PropertyCard({ item }: { item: PropertyCarouselItem }) {
  return (
    <div className="flex shrink-0 flex-col gap-1.5 border border-border p-3 w-44">
      <p className="text-xs text-muted-foreground truncate">{item.address}</p>
      <p className="text-sm font-semibold tabular-nums text-foreground">
        {formatCurrency(item.value)}
      </p>
      {item.loanBalance !== undefined && (
        <p className="text-xs text-muted-foreground tabular-nums">
          Loan: {formatCurrency(item.loanBalance)}
        </p>
      )}
    </div>
  );
}

export function PropertyListCarousel({
  properties,
  type,
  onAddProperty,
  className,
}: PropertyListCarouselProps) {
  const showAddButton = type === "property" && onAddProperty;

  return (
    <div
      className={cn(
        "flex gap-2 overflow-x-auto pb-1 scrollbar-none",
        className,
      )}
    >
      {properties.map((property) => (
        <PropertyCard key={property.id} item={property} />
      ))}

      {showAddButton && (
        <Button
          variant="outline"
          onClick={onAddProperty}
          className="shrink-0 h-auto w-44 flex-col gap-1.5 border-dashed p-3 text-muted-foreground"
        >
          <Plus className="h-4 w-4" />
          <span className="text-xs">Add Property</span>
        </Button>
      )}
    </div>
  );
}