'use client';

import React, { useState, useEffect } from 'react';
import { useTracking } from '../context/TrackingContext';

export const ConsentBanner: React.FC = () => {
  const { hasConsent, grantConsent } = useTracking();
  const [show, setShow] = useState(false);

  useEffect(() => {
    // Show banner if consent not yet granted
    if (!hasConsent) {
      const timer = setTimeout(() => setShow(true), 1000);
      return () => clearTimeout(timer);
    }
  }, [hasConsent]);

  if (hasConsent || !show) {
    return null;
  }

  const handleAccept = () => {
    grantConsent();
    setShow(false);
  };

  const handleDecline = () => {
    setShow(false);
  };

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.9)',
        color: 'white',
        padding: '20px',
        zIndex: 9999,
        boxShadow: '0 -2px 10px rgba(0,0,0,0.3)',
      }}
    >
      <div style={{ maxWidth: '1200px', margin: '0 auto', display: 'flex', alignItems: 'center', gap: '20px', flexWrap: 'wrap' }}>
        <div style={{ flex: 1, minWidth: '300px' }}>
          <h3 style={{ margin: '0 0 10px 0', fontSize: '18px', fontWeight: 'bold' }}>
            🍪 We value your privacy
          </h3>
          <p style={{ margin: 0, fontSize: '14px', lineHeight: '1.5' }}>
            We use tracking to improve your shopping experience and provide personalized recommendations. 
            Your data is stored securely and never shared with third parties.
          </p>
        </div>
        <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
          <button
            onClick={handleDecline}
            style={{
              padding: '10px 20px',
              backgroundColor: 'transparent',
              color: 'white',
              border: '1px solid white',
              borderRadius: '4px',
              cursor: 'pointer',
              fontSize: '14px',
              fontWeight: '500',
            }}
          >
            Decline
          </button>
          <button
            onClick={handleAccept}
            style={{
              padding: '10px 30px',
              backgroundColor: '#0066cc',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              fontSize: '14px',
              fontWeight: '600',
            }}
          >
            Accept & Continue
          </button>
        </div>
      </div>
    </div>
  );
};