/**
 * Service Detail Client Wrapper
 * 
 * Handles client-side interactions for service detail page
 */

'use client';

import { useEffect } from 'react';
import { Button } from '@shinecode/ui';
import { trackServiceView, trackBookingStart } from '@/lib/analytics';

interface ServiceDetailClientProps {
  serviceId: number;
  serviceName: string;
  bookingUrl: string;
  bookNowText: string;
}

export function ServiceDetailClient({
  serviceId,
  serviceName,
  bookingUrl,
  bookNowText,
}: ServiceDetailClientProps) {
  // Track service view on mount
  useEffect(() => {
    trackServiceView(serviceId, serviceName);
  }, [serviceId, serviceName]);

  const handleBooking = () => {
    trackBookingStart(serviceId);
    window.location.href = bookingUrl;
  };

  return (
    <>
      {/* Desktop CTA */}
      <div className="hidden md:block">
        <Button size="lg" className="w-full" onClick={handleBooking}>
          {bookNowText}
        </Button>
      </div>

      {/* Mobile Sticky CTA */}
      <div className="md:hidden fixed bottom-0 inset-x-0 p-4 bg-surface border-t border-border z-40">
        <Button size="lg" className="w-full" onClick={handleBooking}>
          {bookNowText}
        </Button>
      </div>
    </>
  );
}