import { loadUserCompletedTrails } from "@/data/queries";
import { TrailCard } from "../../../TrailCard";
import { EmptyState } from "../../../EmptyState";
import "../../../TrailsList.css";

export default async function ProfileCompletedPage({
  params,
}: {
  params: Promise<{ handle: string }>;
}) {
  const { handle: rawHandle } = await params;
  const handle = decodeURIComponent(rawHandle).replace(/^@/, "");
  const completedTrails = await loadUserCompletedTrails(handle);

  if (completedTrails.length === 0) {
    return <EmptyState message="no trails completed yet" />;
  }

  return (
    <div className="TrailsList">
      {completedTrails.map((trail) => (
        <TrailCard
          key={trail.rkey}
          uri={trail.uri}
          rkey={trail.rkey}
          creatorHandle={trail.creator.handle}
          title={trail.title}
          description={trail.description}
          accentColor={trail.accentColor}
          backgroundColor={trail.backgroundColor}
          creator={trail.creator}
          stopsCount={trail.stopsCount}
        />
      ))}
    </div>
  );
}
