Composant de sélection des charms

[CSV444]

"use client";

import { useState } from "react";

export default function CharmSelector({ charms }) {
const [selected, setSelected] = useState([]);

const toggleCharm = (charm) => {
const exists = selected.find(c => c.id === charm.id);

if (exists) {
  setSelected(selected.filter(c => c.id !== charm.id));
  return;
}

if (selected.length < 5) {
  setSelected([...selected, charm]);
}

};

return (

{selected.length}/5 charms

  {charms.map(charm => (
    <button
      key={charm.id}
      onClick={() => toggleCharm(charm)}
      className="border p-4 m-2"
    >
      {charm.name}
    </button>
  ))}
</div>

);
}