import { useState, useEffect } from 'react';

const DynamicText = () => {
  const [params, setParams] = useState({
    source: 'default-source',
    medium: 'default-medium',
    campaign: 'default-campaign'
  });

  useEffect(() => {
    // Get URL parameters
    const urlParams = new URLSearchParams(window.location.search);

    // Update state with URL parameters or fallback to defaults
    setParams({
      source: urlParams.get('utm_source') || 'default-source',
      medium: urlParams.get('utm_medium') || 'default-medium',
      campaign: urlParams.get('utm_campaign') || 'default-campaign'
    });
  }, []);

  return (
    <div className="p-4 space-y-4">
      <h2 className="text-xl font-bold">Dynamic Content</h2>
      <div className="space-y-2">
        <p>Welcome, visitor from {params.source}!</p>
        <p>You found us through {params.medium}</p>
        <p>Campaign: {params.campaign}</p>
      </div>

      <div className="mt-4 p-4 bg-gray-100 rounded">
        <h3 className="font-semibold mb-2">Current UTM Parameters:</h3>
        <pre className="whitespace-pre-wrap">
          {JSON.stringify(params, null, 2)}
        </pre>
      </div>
    </div>
  );
};

export default DynamicText;