import React from "react";
export function AssetTile({ kind = "Powers", name, note, imgSrc, monogram, hue = "var(--rr-emerald)", width = 150, onClick, style }) {
  const [hover, setHover] = React.useState(false);
  const w = typeof width === "number" ? width + "px" : width;
  return (
    <div onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        width: w, background: "var(--surface)", borderRadius: "var(--radius-md)", overflow: "hidden", cursor: onClick ? "pointer" : "default",
        border: "1px solid " + (hover ? "var(--hairline)" : "var(--border)"),
        boxShadow: hover ? "var(--shadow-glow-gold)" : "var(--shadow-sm)",
        transition: "border-color 160ms, box-shadow 160ms", fontFamily: "var(--font-sans)", ...style
      }}>
      <div style={{ aspectRatio: "1 / 1", background: "var(--bg-deep)", display: "grid", placeItems: "center", borderBottom: "1px solid var(--border)", boxShadow: "inset 0 2px 10px rgba(1,6,5,0.75)" }}>
        {imgSrc
          ? <img src={imgSrc} alt={name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          : <span style={{ fontFamily: "var(--font-display)", fontSize: "34px", color: "color-mix(in srgb, " + hue + " 60%, var(--rr-cream))" }}>{monogram || "✦"}</span>}
      </div>
      <div style={{ padding: "10px 12px 12px" }}>
        <div style={{ fontSize: "9px", fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--rr-muted)" }}>{kind}</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: "15px", color: "var(--fg)", margin: "3px 0 2px" }}>{name}</div>
        {note && <div style={{ fontSize: "11px", fontStyle: "italic", color: "var(--fg-soft)" }}>{note}</div>}
      </div>
    </div>
  );
}