'use client';

import React from 'react';
import { DriversTemplate } from '@/templates/DriversTemplate';
import type { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';

interface DriversPageClientProps {
  pageDto: DriverLeaderboardViewModel | null;
  error?: string;
  empty?: {
    title: string;
    description: string;
  };
}

/**
 * DriversPageClient
 *
 * Client component that:
 * 1. Passes ViewModel directly to Template
 *
 * No business logic, filtering, or sorting here.
 * All data transformation happens in the PageQuery and ViewModelBuilder.
 */
export function DriversPageClient({ pageDto, error, empty }: DriversPageClientProps) {
  // Handle error/empty states
  if (error) {
    return (
      <div className="max-w-7xl mx-auto px-4 py-12 text-center">
        <div className="text-red-400 mb-4">Error loading drivers</div>
        <p className="text-gray-400">Please try again later</p>
      </div>
    );
  }

  if (!pageDto || pageDto.drivers.length === 0) {
    if (empty) {
      return (
        <div className="max-w-7xl mx-auto px-4 py-12 text-center">
          <h2 className="text-xl font-semibold text-white mb-2">{empty.title}</h2>
          <p className="text-gray-400">{empty.description}</p>
        </div>
      );
    }
    return null;
  }

  // Pass ViewModel directly to template
  return <DriversTemplate data={pageDto} />;
}