"use client";

export type AdvertisingModelTab = "cpc" | "cpa";

type AdvertisingModelTabsProps = {
  activeModel: AdvertisingModelTab;
  onChange: (model: AdvertisingModelTab) => void;
  className?: string;
  ariaLabel?: string;
};

export default function AdvertisingModelTabs({
  activeModel,
  onChange,
  className = "",
  ariaLabel = "Advertising model",
}: AdvertisingModelTabsProps) {
  return (
    <>
      <div
        className={`brand-offers-model-tabs w-100 ${className}`.trim()}
        role="tablist"
        aria-label={ariaLabel}
      >
        <button
          type="button"
          role="tab"
          aria-selected={activeModel === "cpc"}
          className={`brand-offers-tab ${
            activeModel === "cpc" ? "is-active" : ""
          }`}
          onClick={() => onChange("cpc")}
        >
          CPC
        </button>
        <button
          type="button"
          role="tab"
          aria-selected={activeModel === "cpa"}
          className={`brand-offers-tab ${
            activeModel === "cpa" ? "is-active" : ""
          }`}
          onClick={() => onChange("cpa")}
        >
          CPA
        </button>
      </div>
      <style jsx global>{`
        .brand-offers-model-tabs {
          display: flex;
          width: 100%;
          gap: 0;
          padding: 4px;
          border: 1px solid #e5e7eb;
          border-radius: 12px;
          background: #f8f9fb;
        }
        .brand-offers-tab {
          flex: 1 1 50%;
          min-height: 40px;
          border: 0;
          border-radius: 8px;
          background: transparent;
          color: #4b5563;
          font-size: 14px;
          font-weight: 600;
          line-height: 1.2;
          cursor: pointer;
          transition: background-color 0.15s ease, color 0.15s ease;
        }
        .brand-offers-tab.is-active {
          background: var(--color-first, #c600ba);
          color: #fff;
          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
        }
        .brand-offers-tab:not(.is-active):hover {
          background: #eef0f4;
          color: #111827;
        }
        @media (max-width: 575.98px) {
          .brand-offers-tab {
            min-height: 44px;
            font-size: 15px;
          }
        }
      `}</style>
    </>
  );
}