"use client";

import type { ProductOfferPublic } from "@/lib/product-types";
import { moneyBrl } from "@/lib/landing-default";

type Props = {
  bumps: ProductOfferPublic[];
  selected: string[];
  onToggle: (id: string) => void;
};

export default function OrderBumpSection({ bumps, selected, onToggle }: Props) {
  if (!bumps.length) return null;

  return (
    <div className="co-bumps">
      <h4>🎁 Aproveite e leve também</h4>
      {bumps.map((b) => {
        const on = selected.includes(b.id);
        return (
          <label key={b.id} className={`co-bump${on ? " on" : ""}`}>
            <input type="checkbox" checked={on} onChange={() => onToggle(b.id)} />
            <div className="co-bump-body">
              <div className="co-bump-top">
                <span className="co-bump-emoji">{b.emoji}</span>
                <div>
                  <b>{b.title}</b>
                  {b.highlightTag ? <span className="co-bump-tag">{b.highlightTag}</span> : null}
                </div>
              </div>
              {b.description ? <p>{b.description}</p> : null}
              <div className="co-bump-price">
                {b.anchorPrice ? <s>{moneyBrl(b.anchorPrice)}</s> : null}
                <strong>{moneyBrl(b.price)}</strong>
              </div>
            </div>
          </label>
        );
      })}
    </div>
  );
}