'use client';

import { Icon } from '@/ui/Icon';
import { Text } from '@/ui/Text';
import { Stack } from '@/ui/Stack';
import { Grid } from '@/ui/Grid';
import { Droplets, Sun, Thermometer, Wind, type LucideIcon } from 'lucide-react';

interface TrackConditionsPanelProps {
  airTemp: string;
  trackTemp: string;
  humidity: string;
  windSpeed: string;
  weatherType: string;
}

export function TrackConditionsPanel({
  airTemp,
  trackTemp,
  humidity,
  windSpeed,
  weatherType,
}: TrackConditionsPanelProps) {
  return (
    <Stack as="section" bg="bg-surface-charcoal" border borderColor="border-outline-steel" p={4}>
      <Text size="xs" weight="bold" color="text-gray-500" uppercase block mb={4}>
        Track Conditions
      </Text>
      
      <Grid cols={2} mdCols={4} gap={4}>
        <ConditionItem 
          icon={Thermometer} 
          label="Air Temp" 
          value={airTemp} 
          color="text-warning-amber" 
        />
        <ConditionItem 
          icon={Thermometer} 
          label="Track Temp" 
          value={trackTemp} 
          color="text-critical-red" 
        />
        <ConditionItem 
          icon={Droplets} 
          label="Humidity" 
          value={humidity} 
          color="text-telemetry-aqua" 
        />
        <ConditionItem 
          icon={Wind} 
          label="Wind" 
          value={windSpeed} 
          color="text-gray-400" 
        />
      </Grid>

      <Stack mt={4} pt={4} borderTop borderColor="border-outline-steel" bgOpacity={0.5} display="flex" alignItems="center" gap={3}>
        <Icon icon={Sun} size={4} color="#FFBE4D" />
        <Text size="sm" color="text-gray-300">{weatherType}</Text>
      </Stack>
    </Stack>
  );
}

function ConditionItem({ 
  icon, 
  label, 
  value, 
  color 
}: { 
  icon: LucideIcon, 
  label: string, 
  value: string, 
  color: string 
}) {
  return (
    <Stack gap={1}>
      <Stack direction="row" alignItems="center" gap={2}>
        <Icon icon={icon} size={3} color="#6b7280" />
        <Text size="xs" color="text-gray-500" weight="bold" uppercase>{label}</Text>
      </Stack>
      <Text size="lg" weight="bold" color={color}>{value}</Text>
    </Stack>
  );
}