"use client";

import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface Run {
  id: number;
  start: string;
  end: string;
  hops: number;
}

interface RunsListProps {
  runs: Run[];
  onSelectRun: (runId: number) => void;
  selectedRunId: number | null;
}

export default function RunsList({
  runs,
  onSelectRun,
  selectedRunId,
}: RunsListProps) {
  return (
    <div className="h-[600px] overflow-y-auto space-y-2 pr-1">
      {runs.map((run) => (
        <Card
          key={run.id}
          className={cn(
            "p-3 cursor-pointer transition-all border",
            selectedRunId === run.id
              ? "bg-primary/10 border-primary/50 shadow-sm"
              : "hover:bg-muted/80 border-transparent"
          )}
          onClick={() => onSelectRun(run.id)}
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="font-medium flex items-center">
                <span>{run.start}</span>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="mx-1"
                >
                  <path d="M5 12h14" />
                  <path d="m12 5 7 7-7 7" />
                </svg>
                <span>{run.end}</span>
              </p>
              <p className="text-sm text-muted-foreground">{run.hops} hops</p>
            </div>
            {selectedRunId === run.id && (
              <div
                className="h-2 w-2 rounded-full bg-primary"
                aria-hidden="true"
              />
            )}
          </div>
        </Card>
      ))}

      {runs.length === 0 && (
        <div className="flex items-center justify-center h-full text-muted-foreground">
          No runs available
        </div>
      )}
    </div>
  );
}