import Icon from "./Icon";

export const ACCOUNT_ICONS = [
  "wallet", "landmark", "piggy-bank", "vault", "credit-card", "trending-up",
  "banknote", "coins",
];

// Lose nach Lebensbereich sortiert, damit man beim Suchen nicht das ganze
// Gitter absuchen muss: Wohnen, Alltag, Unterwegs, Gesundheit & Koerper,
// Freizeit, Familie, Geld & Vorsorge, Sonstiges.
export const CATEGORY_ICONS = [
  "home", "bed", "zap", "droplet", "flame", "wifi", "monitor", "cloud",
  "shopping-cart", "shopping-bag", "store", "utensils", "coffee", "wine",
  "shirt", "scissors", "sparkle",
  "car", "fuel", "bus", "bike", "plane", "ticket",
  "heart-pulse", "pill", "dumbbell",
  "film", "music", "book-open", "newspaper", "graduation-cap", "paw-print",
  "sprout", "cake", "gift", "baby", "heart",
  "piggy-bank", "vault", "umbrella", "life-buoy", "shield", "scale",
  "briefcase", "wrench", "hammer", "phone", "refresh-ccw", "percent",
  "receipt", "banknote", "coins", "landmark", "wallet", "trending-up",
  "credit-card", "list", "more-horizontal",
];

// Auswahlgitter für ein Icon. `value` ist der aktuell gewählte Icon-Name.
export default function IconPicker({ icons = CATEGORY_ICONS, value, onChange, color = "#3f51b5" }) {
  return (
    <div className="icon-picker">
      {icons.map((name) => (
        <button
          key={name}
          type="button"
          className={`icon-picker-item${value === name ? " selected" : ""}`}
          style={value === name ? { color, borderColor: color } : undefined}
          onClick={() => onChange(name)}
          title={name}
        >
          <Icon name={name} size={18} />
        </button>
      ))}
    </div>
  );
}