interface ActionRowProps {
  label: string;
  subtitle?: string;
  icon?: string;
  onClick?: () => void;
}

/** Tappable row that triggers an action. */
export function ActionRow({ label, subtitle, icon, onClick }: ActionRowProps) {
  return (
    <button
      onClick={onClick}
      class="w-full flex items-center gap-3 rounded-[var(--z-radius-button)] mb-1 transition-all text-left"
      style={{ border: "var(--z-card-border)", boxShadow: "var(--z-card-shadow)", padding: "var(--z-density-padding)" }}
      onMouseOver={(e) => { (e.currentTarget as HTMLElement).style.background = "var(--z-card-bg)"; }}
      onMouseOut={(e) => { (e.currentTarget as HTMLElement).style.background = "transparent"; }}
    >
      {icon && <span class="text-lg w-6 text-center shrink-0">{icon}</span>}
      <div class="flex-1 min-w-0">
        <p class="text-[var(--z-font-md)] font-medium">{label}</p>
        {subtitle && <p class="text-[var(--z-font-sm)]" style={{ color: "var(--z-muted)" }}>{subtitle}</p>}
      </div>
      <span class="text-xs" style={{ color: "var(--z-muted)", opacity: 0.3 }}>→</span>
    </button>
  );
}
