import type { User } from "../data/queries";
import type { ReactNode } from "react";
import { Card } from "@/components/Card";
import "./TrailCard.css";

type Props = {
  uri?: string;
  rkey: string;
  creatorHandle: string;
  title: string;
  description: string;
  accentColor: string;
  backgroundColor: string;
  creator: User;
  stopsCount: number;
  walkersSlot?: ReactNode;
};

export function TrailCard({
  rkey,
  creatorHandle,
  title,
  description,
  accentColor,
  backgroundColor,
  creator,
  stopsCount,
  walkersSlot,
}: Props) {
  return (
    <Card
      href={`/@${creatorHandle}/trail/${rkey}`}
      accentColor={accentColor}
      backgroundColor={backgroundColor}
    >
      <div className="TrailCard">
        <h3 className="TrailCard-title">{title}</h3>
        <p className="TrailCard-description">{description}</p>
        <div className="TrailCard-meta">
          <span className="TrailCard-creator">@{creator.handle}</span>
          <div className="TrailCard-activity">
            {walkersSlot}
            <span className="TrailCard-steps">{stopsCount} stops</span>
          </div>
        </div>
      </div>
    </Card>
  );
}
