components/CampaignSection.js

import InputField from './InputField';

export default function CampaignSection({ title, budget, setBudget, cpm, setCpm, ctr, setCtr, convRate, setConvRate }) {
  return (
    <div className="card bg-slate-50 border-slate-200">
      <h3 className="text-lg font-semibold text-slate-800 mb-4 flex items-center gap-2">
        <span className="w-2 h-2 rounded-full bg-brand-500"></span>
        {title}
      </h3>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <InputField 
          label="Budget Advertising" 
          value={budget} 
          onChange={setBudget} 
          suffix="€" 
        />
        <InputField 
          label="CPM (Costo per Mille)" 
          value={cpm} 
          onChange={setCpm} 
          suffix="€" 
        />
        <InputField 
          label="CTR (Click-Through Rate)" 
          value={ctr} 
          onChange={setCtr} 
          suffix="%" 
          step={0.1}
        />
        <InputField 
          label="Conversion Rate" 
          value={convRate} 
          onChange={setConvRate} 
          suffix="%" 
          step={0.1}
        />
      </div>
    </div>
  );
}