SplitCard.tsx

import type { SplitStatus, SplitRole } from "../../pages/SplitHistoryPage";

interface SplitCardProps {
  title: string;
  subtitle: string;
  amountLabel: string;
  status: SplitStatus;
  role: SplitRole;
  participants: string[];
}

export function SplitCard({ title, subtitle, amountLabel, status, role, participants }: SplitCardProps) {
  const statusClass =
    status === "completed"
      ? "bg-green-50 text-green-700 border-green-200"
      : status === "active"
        ? "bg-blue-50 text-blue-700 border-blue-200"
        : "bg-gray-100 text-gray-600 border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600";

  return (
    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h4 className="text-base font-semibold text-gray-900 dark:text-gray-100">{title}</h4>
        <p className="text-sm text-gray-600 dark:text-gray-300">{subtitle}</p>
        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400 truncate">
          {participants.join(", ")}
        </p>
        <div className="mt-2 flex gap-2">
          <span
            className={`px-2 py-0.5 rounded-full text-xs font-medium border ${statusClass}`}
          >
            {capitalize(status)}
          </span>
          <span className="px-2 py-0.5 rounded-full text-xs font-medium border bg-purple-50 text-purple-700 border-purple-200">
            {capitalize(role)}
          </span>
        </div>
      </div>
      <div className="mt-3 sm:mt-0 text-right">
        <div className="text-lg font-bold text-gray-900 dark:text-gray-100">{amountLabel}</div>
      </div>
    </div>
  );
}

function capitalize(str: string) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}