"use client";

import { deleteDraft } from "@/data/drafts/actions";
import { HomeWalkingPill } from "../walking/HomeWalkingPill";
import { HomeEmptyState } from "@/app/HomeEmptyState";
import type { DraftListItem } from "@/data/drafts/queries";

type Props = {
  initialDrafts: DraftListItem[];
};

export function DraftsClientPage({ initialDrafts }: Props) {
  const deleteAction = async (rkey: string) => {
    await deleteDraft(rkey);
  };

  if (initialDrafts.length === 0) {
    return <HomeEmptyState message="no drafts saved" buttonText="start a new trail" />;
  }

  return (
    <div className="drafts-pills">
      {initialDrafts.map((draft) => (
        <HomeWalkingPill
          key={draft.rkey}
          title={draft.title || "untitled draft"}
          subtitle={`${draft.stopsCount} ${draft.stopsCount === 1 ? "stop" : "stops"}`}
          accentColor={draft.accentColor}
          backgroundColor={draft.backgroundColor}
          linkTo={`/drafts/${draft.rkey}`}
          dots={Array(draft.stopsCount).fill("upcoming")}
          deleteAction={() => deleteAction(draft.rkey)}
          deleteLabel="delete draft"
          deleteConfirmMessage="delete this draft?"
        />
      ))}
    </div>
  );
}
