"use client";

import { useState } from "react";
import type { ReactNode } from "react";
import { ChevronDown, ChevronUp } from "lucide-react";

export function TransactionTableRow({
  id,
  selectLabel,
  date,
  description,
  category,
  paidBy,
  amount,
  project,
  detail,
  actions,
  actionColumn = true
}: {
  id: string;
  selectLabel: string;
  date: string;
  description: string;
  category: string;
  paidBy: string;
  amount: ReactNode;
  project: string;
  detail: ReactNode;
  actions?: ReactNode;
  actionColumn?: boolean;
}) {
  const [open, setOpen] = useState(false);
  const colSpan = actionColumn ? 9 : 8;

  return (
    <>
      <tr className={open ? "bg-blue-50/35" : "table-row"}>
        <td className="table-cell">
          <input data-record-checkbox className="h-4 w-4 rounded border-line" type="checkbox" value={id} aria-label={selectLabel} />
        </td>
        <td className="table-cell align-top">
          <button className="btn-secondary px-2 py-1 text-xs text-blue-700" type="button" onClick={() => setOpen((value) => !value)} aria-expanded={open}>
            View
            {open ? <ChevronUp className="h-3.5 w-3.5" aria-hidden="true" /> : <ChevronDown className="h-3.5 w-3.5" aria-hidden="true" />}
          </button>
        </td>
        <td className="table-cell">{date}</td>
        <td className="table-cell font-medium text-ink">{description}</td>
        <td className="table-cell">{category}</td>
        <td className="table-cell">{paidBy}</td>
        <td className="table-cell font-semibold text-ink">{amount}</td>
        <td className="table-cell">{project}</td>
        {actionColumn ? <td className="table-cell align-top">{actions}</td> : null}
      </tr>
      {open ? (
        <tr className="border-b border-blue-100 bg-blue-50/20">
          <td colSpan={colSpan} className="px-4 py-4">
            {detail}
          </td>
        </tr>
      ) : null}
    </>
  );
}