import { BackButton } from "@/app/BackButton";
import { AccentButton } from "./AccentButton";
import "./TrailCompletionCard.css";

type Props = {
  onWriteReflection: () => void;
};

export function TrailCompletionCard({ onWriteReflection }: Props) {
  return (
    <div className="TrailCompletionCard">
      <h2 className="TrailCompletionCard-title">you walked this trail</h2>
      <p className="TrailCompletionCard-text">you walked the whole thing. share it if you want.</p>
      <AccentButton onClick={onWriteReflection} size="medium">
        write a reflection
      </AccentButton>
      <div className="TrailCompletionCard-nav">
        <BackButton />
      </div>
    </div>
  );
}
