import { Person } from "../../items";

interface PersonSelectorProps {
  people: Person[];
  selectedPeople: Set<string>;
  onTogglePerson: (name: string) => void;
}

export function PersonSelector({
  people,
  selectedPeople,
  onTogglePerson,
}: PersonSelectorProps) {
  return (
    <div style={{ marginBottom: "3rem" }}>
      <h3>Select People</h3>
      <div
        className="grid-container"
        style={{
          display: "flex",
          flexWrap: "wrap",
          gap: "1rem",
          justifyContent: "center",
        }}
      >
        {people.map((person) => (
          <div
            key={person.name}
            className="list-item gamefilter-entry"
            style={{
              borderColor: selectedPeople.has(person.name)
                ? "var(--accent-color)"
                : "var(--border-color)",
              cursor: "pointer",
            }}
            onClick={() => onTogglePerson(person.name)}
          >
            <div style={{ gap: "0.5rem" }}>
              <strong>{person.name}</strong>
            </div>
            <div
              style={{
                fontSize: "0.9em",
                color: "var(--text-muted)",
                marginTop: "0.5rem",
              }}
            >
              {person.opinion.length} opinion(s)
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}