import { AmenityIcon } from "@/components/icons/AmenityIcon";
import type { AmenityWithIcon } from "@/lib/data/amenities";

type Props = {
  item: AmenityWithIcon;
  variant?: "card" | "inline";
  /** Use on tinted bands (e.g. “All rooms include”) so cards stay readable */
  cardTone?: "elevated" | "embedded";
};

export function AmenityItem({
  item,
  variant = "card",
  cardTone = "elevated",
}: Props) {
  if (variant === "inline") {
    return (
      <li className="flex items-start gap-2.5 text-xs text-[var(--color-muted)]">
        <span
          className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-[var(--color-primary)]/[0.08] text-[var(--color-primary)]"
          aria-hidden
        >
          <AmenityIcon id={item.icon} className="h-3.5 w-3.5" />
        </span>
        <span className="min-w-0 pt-0.5 leading-snug">{item.label}</span>
      </li>
    );
  }

  const cardBg =
    cardTone === "embedded"
      ? "bg-[var(--color-bg)]"
      : "bg-[var(--color-surface)]";

  return (
    <li
      className={`flex items-start gap-3 rounded-xl border border-[var(--color-border)] px-4 py-3.5 text-sm text-[var(--color-text)] ${cardBg}`}
    >
      <span
        className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--color-primary)]/[0.1] text-[var(--color-primary)] ring-1 ring-[var(--color-primary)]/15"
        aria-hidden
      >
        <AmenityIcon id={item.icon} className="h-5 w-5" />
      </span>
      <span className="min-w-0 pt-1 leading-snug">{item.label}</span>
    </li>
  );
}