'use client';
import { useState } from 'react';
import { useTranslations } from 'next-intl';
import { LoginModal } from './LoginModal';
import { trackEvent } from '@/lib/analytics';

type Props = {
  isLoggedIn: boolean;
  blogId: number;
  hiddenContent: React.ReactNode;
};

export function BreakpointGate({ isLoggedIn, blogId, hiddenContent }: Props) {
  const t = useTranslations('blog');
  const [expanded, setExpanded] = useState(false);
  const [showLogin, setShowLogin] = useState(false);

  const handleExpand = async () => {
    if (!isLoggedIn) {
      setShowLogin(true);
      return;
    }
    setExpanded(true);
    trackEvent('breakpoint_expand', { blogId, meta: { isFirstLogin: false } });
  };

  const handleLoginSuccess = () => {
    setShowLogin(false);
    setExpanded(true);
    trackEvent('breakpoint_expand', { blogId, meta: { isFirstLogin: true } });
  };

  return (
    <>
      {!expanded && (
        <div className="breakpoint-gate">
          <button className="bp-btn" onClick={handleExpand}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M6 9l6 6 6-6" />
            </svg>
            {t('viewAll')}
          </button>
        </div>
      )}
      <div className={`bp-hidden-content ${expanded ? 'expanded' : ''}`}>
        {hiddenContent}
      </div>
      <LoginModal
        open={showLogin}
        onClose={() => setShowLogin(false)}
        onSuccess={handleLoginSuccess}
      />
    </>
  );
}