'use client'

import { useEffect, useState } from 'react'
import { cn } from '@/lib/utils/cn'
import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { Section } from '../ui/section'

export const CookieConsent = () => {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    const consent = localStorage.getItem('cookie-consent')
    if (!consent) {
      setIsVisible(true)
    }
  }, [])

  const handleAccept = () => {
    localStorage.setItem('cookie-consent', 'true')
    setIsVisible(false)
  }

  if (!isVisible) return null

  return (
    <div className="fixed bottom-0 left-0 right-0 z-[9999] max-w-[1184px] w-full mx-auto">
      <div className="p-4 bg-[#2928287A] py-8 px-6 rounded-t-lg border border-[#FFFFFF66] border-b-0 backdrop-blur-[100px] flex items-center justify-between gap-6 tablet:gap-10 flex-col tablet:flex-row">
        <p className="text-grey-200 b3-regular">
          We use cookies to improve your experience. By using our site, you agree to our{' '}
          <Link
            href="/cookies-policy"
            className="text-base-white link-medium underline underline-offset-2"
          >
            Cookie Policy
          </Link>
        </p>

        <Button
          sizes="btn-md tablet:btn-lg"
          variant="primary"
          onClick={handleAccept}
          className="w-full tablet:w-fit justify-center"
        >
          Accept
        </Button>
      </div>
    </div>
  )
}
