import type { TrailCardData } from "../data/queries";
import { TrailCard } from "./TrailCard";
import { HomeEmptyState } from "./HomeEmptyState";
import "./HomeTrailsList.css";

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

export function HomeTrailsList({ trails }: Props) {
  if (trails.length === 0) {
    return (
      <HomeEmptyState message="no trails are trending right now" buttonText="start a new trail" />
    );
  }

  return (
    <div className="HomeTrailsList-grid">
      {trails.map((trail) => (
        <TrailCard
          key={trail.uri}
          uri={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}
        />
      ))}
    </div>
  );
}
