gitfor/platform

"use client";
import { useEffect, useRef } from "react";
import type { GitStatus } from "~/utils/git";
import { parsePatchFiles } from "@pierre/diffs";
import type { FileDiff as FileDiffRenderer } from "@pierre/diffs";
import { cn } from "~/utils/cn";

type FileChange = { status: string; path: string };

export type StatusViewProps = {
  status: GitStatus;
  workingDiff: string;
  stagedDiff: string;
};

export function StatusView({ status, workingDiff, stagedDiff }: StatusViewProps) {
  const hasChanges = status.staged.length > 0 || status.unstaged.length > 0 || status.untracked.length > 0;

  if (!hasChanges) {
    return <div className="flex h-full items-center justify-center text-gray-500">Working tree clean</div>;
  }

  return (
    <div className="space-y-6 p-4">
      <DiffSection title="Staged" items={status.staged} color="text-emerald-400" diff={stagedDiff} />
      <DiffSection title="Unstaged" items={status.unstaged} color="text-amber-400" diff={workingDiff} />

      {status.untracked.length > 0 && (
        <section>
          <h2 className="mb-2 text-sm font-medium text-gray-400">Untracked ({status.untracked.length})</h2>
          <ul className="space-y-0.5 font-mono text-sm">
            {status.untracked.map((p) => (
              <li key={p} className="text-gray-500">
                <span className="mr-2 text-gray-600">?</span>
                {p}
              </li>
            ))}
          </ul>
        </section>
      )}