'use client';

import React from 'react';
import { ChargePoint } from '@/types/chargepoint/chargepoint';
import { DesktopChargePointDrawer } from './DesktopStationDrawer';
import { MobileChargePointModal } from './MobileStationModal';

interface ResponsiveChargePointInfoProps {
  readonly chargePoint: ChargePoint | null;
  readonly onClose: () => void;
  readonly isMobile?: boolean;
  readonly onDrawerStateChange?: (isOpen: boolean) => void;
}

export function ResponsiveChargePointInfo({ 
  chargePoint, 
  onClose, 
  isMobile = false,
  onDrawerStateChange
}: ResponsiveChargePointInfoProps) {
  // Notify parent about drawer state changes
  React.useEffect(() => {
    if (onDrawerStateChange) {
      onDrawerStateChange(!!chargePoint && !isMobile);
    }
  }, [chargePoint, isMobile, onDrawerStateChange]);

  if (!chargePoint) return null;

  if (isMobile) {
    return <MobileChargePointModal chargePoint={chargePoint} onClose={onClose} />;
  }

  return <DesktopChargePointDrawer chargePoint={chargePoint} onClose={onClose} />;
}

// Backward compatibility export
export function ResponsiveStationInfo(props: any) {
  return <ResponsiveChargePointInfo {...props} />;
}