"use client";

import Link from "next/link";
import { MessageSquare } from "lucide-react";
import { timeAgo, formatTokens, platformBadgeClass } from "@/lib/utils";
import type { Session } from "@/lib/types";

export function SessionCard({ session }: { session: Session }) {
  const tokens = session.input_tokens + session.output_tokens;
  const title = session.title || `Session ${session.id.slice(0, 8)}`;

  return (
    <Link href={`/history/${session.id}`}>
      <div className="glass glass-hover p-4 transition-all">
        <div className="flex items-start justify-between gap-2 mb-2">
          <span className="text-sm font-medium text-zinc-200 line-clamp-1 flex-1">
            {title}
          </span>
          <span
            className={`text-[10px] px-1.5 py-0.5 rounded-full shrink-0 font-medium ${platformBadgeClass(session.source)}`}
          >
            {session.source}
          </span>
        </div>
        <div className="flex items-center gap-3 text-xs text-zinc-500">
          <span className="flex items-center gap-1">
            <MessageSquare size={12} />
            {session.message_count}
          </span>
          {tokens > 0 && <span>{formatTokens(tokens)} tok</span>}
          <span className="ml-auto">{timeAgo(session.started_at)}</span>
        </div>
      </div>
    </Link>
  );
}