import { XIcon } from "lucide-react";
import { isElectron } from "../env";
import { useStore } from "../store";
import { Button } from "./ui/button";

export default function DiffPanel() {
  const { dispatch } = useStore();

  return (
    <aside className="flex h-full w-[400px] shrink-0 flex-col border-l border-border bg-card">
      {/* Header */}
      <div
        className={`flex items-center justify-between border-b border-border px-4 ${isElectron ? "drag-region h-[52px]" : "py-3"}`}
      >
        <h3 className="text-xs font-medium text-foreground">Uncommitted changes</h3>
        <Button
          type="button"
          size="icon-xs"
          variant="ghost"
          onClick={() => dispatch({ type: "TOGGLE_DIFF" })}
        >
          <XIcon />
        </Button>
      </div>

      {/* Placeholder content */}
      <div className="flex-1 overflow-y-auto p-4">
        <div className="space-y-3">
          <div className="rounded-lg border border-border/80 bg-muted p-3">
            <div className="mb-2 flex items-center gap-2">
              <span className="rounded bg-emerald-500/20 px-1.5 py-0.5 text-[9px] font-medium text-emerald-400">
                M
              </span>
              <span className="font-mono text-xs text-muted-foreground/80">src/App.tsx</span>
            </div>
            <div className="space-y-0.5 font-mono text-[11px]">
              <div className="text-red-400/60">- const oldValue = "hello";</div>
              <div className="text-emerald-400/60">+ const newValue = "world";</div>
            </div>
          </div>

          <div className="rounded-lg border border-border/80 bg-muted p-3">
            <div className="flex items-center gap-2">
              <span className="rounded bg-blue-500/20 px-1.5 py-0.5 text-[9px] font-medium text-blue-400">
                A
              </span>
              <span className="font-mono text-xs text-muted-foreground/80">src/utils.ts</span>
            </div>
          </div>
        </div>

        <p className="mt-6 text-center text-[10px] text-muted-foreground/30">
          Diff integration coming soon
        </p>
      </div>
    </aside>
  );
}