/**
 * RaceCreationSuccessScreen component
 * Displays the successful race creation result with session details.
 */

import React from 'react';

interface RaceCreationResult {
  sessionId: string;
  sessionName: string;
  trackId: string;
  carIds: string[];
  finalPrice: string;
  createdAt: Date;
}

interface RaceCreationSuccessScreenProps {
  result: RaceCreationResult;
}

export const RaceCreationSuccessScreen: React.FC<RaceCreationSuccessScreenProps> = ({
  result,
}) => {
  return (
    <div className="race-creation-success-screen">
      <div className="success-container">
        <div className="success-header">
          <h2>✅ Race Created Successfully!</h2>
        </div>

        <div className="success-details">
          <div className="detail-section">
            <h3>Session Information</h3>
            <div className="detail-row">
              <span className="detail-label">Session Name:</span>
              <span className="detail-value">{result.sessionName}</span>
            </div>
            <div className="detail-row">
              <span className="detail-label">Session ID:</span>
              <span className="detail-value">{result.sessionId}</span>
            </div>
          </div>

          <div className="detail-section">
            <h3>Track & Cars</h3>
            <div className="detail-row">
              <span className="detail-label">Track:</span>
              <span className="detail-value">{result.trackId}</span>
            </div>
            <div className="detail-row">
              <span className="detail-label">Cars:</span>
              <span className="detail-value">{result.carIds.join(', ')}</span>
            </div>
          </div>

          <div className="detail-section">
            <h3>Financial</h3>
            <div className="detail-row">
              <span className="detail-label">Final Price:</span>
              <span className="detail-value price">{result.finalPrice}</span>
            </div>
          </div>

          <div className="detail-section">
            <h3>Created</h3>
            <div className="detail-row">
              <span className="detail-label">Timestamp:</span>
              <span className="detail-value">
                {result.createdAt.toISOString().split('T')[0]} at{' '}
                {result.createdAt.toLocaleTimeString()}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};