"use client";

import { Skeleton } from '@/components/common/Skeleton';

export function SessionDetailSkeleton() {
  return (
    <div className="mx-auto max-w-4xl space-y-8 mb-8">
      {/* Back Button Skeleton */}
      <Skeleton className="h-6 w-20" />

      {/* Session Header Skeleton */}
      <div className="text-center space-y-4">
        <Skeleton className="h-6 w-48 mx-auto" />
        <Skeleton className="h-4 w-64 mx-auto" />
        <div className="flex justify-center gap-4">
          <Skeleton className="h-12 w-32" />
          <Skeleton className="h-10 w-24 rounded-full" />
        </div>
      </div>

      {/* Station Info Skeleton */}
      <div className="rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-6">
        <Skeleton className="h-6 w-48 mb-4" />
        <div className="flex items-start gap-6">
          <Skeleton className="h-32 w-32 rounded-lg hidden sm:block" />
          <div className="flex-grow space-y-4">
            <Skeleton className="h-6 w-3/4" />
            <Skeleton className="h-4 w-full" />
            <div className="my-4 border-t border-gray-200 dark:border-gray-700" />
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Skeleton className="h-4 w-24" />
                <Skeleton className="h-5 w-32" />
              </div>
              <div className="space-y-2">
                <Skeleton className="h-4 w-24" />
                <Skeleton className="h-5 w-32" />
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Charging Metrics Skeleton */}
      <div className="w-full max-w-6xl mx-auto p-6 bg-white rounded-xl shadow-md dark:bg-gray-800 dark:border-gray-700 space-y-6">
        <div className="flex justify-end">
          <Skeleton className="h-4 w-32" />
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <Skeleton className="h-32 rounded-xl" />
          <Skeleton className="h-32 rounded-xl" />
        </div>
        <div className="border-t pt-4 dark:border-gray-700 space-y-4">
          <Skeleton className="h-10 w-full" />
          <Skeleton className="h-10 w-full" />
        </div>
      </div>
    </div>
  );
}