import Link from "next/link";
import type { User } from "../data/queries";
import { loadTrailActiveWalkers } from "../data/queries";
import { FloatingAvatar } from "./FloatingAvatar";
import "./TrailCard.css";

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

async function ActiveWalkers({ trailUri }: { trailUri: string }) {
  const walkers = await loadTrailActiveWalkers(trailUri);
  const displayWalkers = walkers.filter((w) => w.avatar).slice(0, 3);

  if (displayWalkers.length === 0) return null;

  return (
    <div className="TrailCard-walkers">
      {displayWalkers.map((walker, i) => {
        return (
          <FloatingAvatar
            key={i}
            src={walker.avatar}
            title={walker.handle}
            contained={true}
            opaque={true}
            handle={walker.handle}
          />
        );
      })}
    </div>
  );
}

export async function TrailCard({
  uri,
  rkey,
  creatorHandle,
  title,
  description,
  accentColor,
  backgroundColor,
  creator,
  stopsCount,
}: Props) {
  return (
    <div className="TrailCard">
      <Link href={`/@${creatorHandle}/trail/${rkey}`} className="TrailCard-underlay" />
      <div
        className="TrailCard-bg"
        style={
          {
            "--accent-color": accentColor,
            "--accent-color-transparent": `${accentColor}15`,
            "--bg-color": backgroundColor,
          } as React.CSSProperties
        }
      >
        <h3 className="TrailCard-title">
          <span>{title}</span>
        </h3>
        <p className="TrailCard-description">{description}</p>
        <div className="TrailCard-meta">
          <span className="TrailCard-creator">@{creator.handle}</span>
          <div className="TrailCard-activity">
            <ActiveWalkers trailUri={uri} />
            <span className="TrailCard-steps">{stopsCount} stops</span>
          </div>
        </div>
      </div>
    </div>
  );
}
