'use client';

import React from 'react';
import { Station } from '@/types/stationTypes';
import { DesktopClusterDrawer } from './DesktopClusterDrawer';
import { MobileClusterModal } from './MobileClusterModal';

interface ResponsiveClusterInfoProps {
  readonly stations: Station[] | null;
  readonly onClose: () => void;
  readonly onStationSelect: (station: Station) => void;
  readonly isMobile?: boolean;
}

export function ResponsiveClusterInfo({ 
  stations, 
  onClose, 
  onStationSelect,
  isMobile = false 
}: ResponsiveClusterInfoProps) {
  if (!stations || stations.length === 0) return null;

  if (isMobile) {
    return (
      <MobileClusterModal 
        stations={stations} 
        onClose={onClose} 
        onStationSelect={onStationSelect} 
      />
    );
  }

  return (
    <DesktopClusterDrawer 
      stations={stations} 
      onClose={onClose} 
      onStationSelect={onStationSelect} 
    />
  );
}