import { Box } from '@/ui/Box';
import { Panel } from '@/ui/Panel';
import { Stack } from '@/ui/Stack';
import { StatusDot } from '@/ui/StatusDot';
import { Text } from '@/ui/Text';

interface SessionSummaryPanelProps {
  title: string;
  status: 'live' | 'upcoming' | 'completed';
  startTime?: string;
  trackName?: string;
  carName?: string;
  className?: string;
}

/**
 * SessionSummaryPanel
 * 
 * Displays a dense summary of a racing session.
 * Part of the "Telemetry Workspace" layout.
 */
export function SessionSummaryPanel({
  title,
  status,
  startTime,
  trackName,
  carName,
  className = '',
}: SessionSummaryPanelProps) {
  const statusColor = status === 'live' ? '#4ED4E0' : status === 'upcoming' ? '#FFBE4D' : '#94a3b8';

  return (
    <Panel title="Session Summary" className={className}>
      <Stack gap={3}>
        <Stack direction="row" align="center" justify="between">
          <Text weight="bold" size="lg">{title}</Text>
          <Stack direction="row" align="center" gap={2}>
            <StatusDot color={statusColor} pulse={status === 'live'} size={2} />
            <Text size="xs" uppercase weight="bold" style={{ color: statusColor }}>
              {status}
            </Text>
          </Stack>
        </Stack>

        <Box display="grid" gridCols={2} gap={4} borderTop borderStyle="solid" borderColor="border-gray/10" pt={3}>
          {startTime && (
            <Box>
              <Text size="xs" color="text-gray-500" uppercase block mb={1}>Start Time</Text>
              <Text size="sm">{startTime}</Text>
            </Box>
          )}
          {trackName && (
            <Box>
              <Text size="xs" color="text-gray-500" uppercase block mb={1}>Track</Text>
              <Text size="sm">{trackName}</Text>
            </Box>
          )}
          {carName && (
            <Box colSpan={2}>
              <Text size="xs" color="text-gray-500" uppercase block mb={1}>Vehicle</Text>
              <Text size="sm">{carName}</Text>
            </Box>
          )}
        </Box>
      </Stack>
    </Panel>
  );
}