// SPDX-FileCopyrightText: 2025 Contributors to the CitrineOS Project
//
// SPDX-License-Identifier: Apache-2.0

import React from 'react';
import { ChargingStationDetailCard } from '@lib/client/pages/charging-stations/detail/charging.station.detail.card';
import { pageFlex, pageMargin } from '@lib/client/styles/page';
import { ChargingStationDetailTabsCard } from '@lib/client/pages/charging-stations/detail/charging.station.detail.tabs.card';
import { Skeleton } from '@lib/client/components/ui/skeleton';

type ChargingStationDetailProps = {
  params: { id: string; station?: any };
};

export const ChargingStationDetail: React.FC<ChargingStationDetailProps> = ({ params }) => {
  const { id, station } = params;

  if (!id) {
    return (
      <div className={`${pageMargin} ${pageFlex}`}>
        <Skeleton className="h-50 w-full" />
        <Skeleton className="h-60 w-full" />
      </div>
    );
  }

  return (
    <>
      <script
        id="station-data"
        type="application/json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(station || null) }}
      />
      <div className={`${pageMargin} ${pageFlex}`}>
        <ChargingStationDetailCard id={id} imageUrl={null} />
        <ChargingStationDetailTabsCard id={String(id)} />
      </div>
    </>
  );
};
