'use client';

import { Button } from '@/components/ui/Button';
import { useCookieConsent } from './CookieContext';

export function CookieBanner() {
  const { showBanner, acceptAll, openModal } = useCookieConsent();
  
  if (!showBanner) return null;
  
  return (
    <div className="fixed bottom-0 left-0 right-0 z-30 bg-white shadow-lg border-t border-gray-200 px-4 py-3">
      <div className="container mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
        <p className="text-sm text-gray-700 text-center sm:text-left">
          Ova web stranica koristi kolačiće za poboljšanje korisničkog iskustva.
          <button 
            onClick={openModal}
            className="underline ml-1 hover:text-black"
          >
            Više informacija
          </button>
        </p>
        
        <div className="flex flex-row gap-3">
          <Button 
            variant="outline" 
            size="sm"
            className="px-3 whitespace-nowrap" 
            onClick={openModal}
          >
            Prilagodi
          </Button>
          <Button 
            variant="primary" 
            size="sm"
            className="whitespace-nowrap"
            onClick={acceptAll}
          >
            Prihvati sve
          </Button>
        </div>
      </div>
    </div>
  );
}