import type { TrailCardData } from "../data/queries";
import { TrailCard } from "./TrailCard";
import { TrailCardWalkers } from "./TrailCardWalkers";
import "./TrailsList.css";

type Props = {
  trails: TrailCardData[];
};

export function TrailsList({ trails }: Props) {
  return (
    <div className="TrailsList">
      {trails.map((trail) => (
        <TrailCard
          key={trail.uri}
          rkey={trail.rkey}
          creatorHandle={trail.creatorHandle}
          title={trail.title}
          description={trail.description}
          accentColor={trail.accentColor}
          backgroundColor={trail.backgroundColor}
          creator={trail.creator}
          stopsCount={trail.stopsCount}
          walkersSlot={<TrailCardWalkers trailUri={trail.uri} />}
        />
      ))}
    </div>
  );
}
