'use client';

import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';
import { Panel } from '@/ui/Panel';
import { Input } from '@/ui/Input';
import { Text } from '@/ui/Text';
import { TextArea } from '@/ui/TextArea';
import { Box } from '@/ui/Box';
import { Group } from '@/ui/Group';
import { Stack } from '@/ui/Stack';
import { ProfileStat } from '@/ui/ProfileHero';
import React from 'react';

interface ProfileDetailsPanelProps {
  driver: {
    name: string;
    country: string;
    bio?: string | null;
  };
  isEditing?: boolean;
  onUpdate?: (updates: { bio?: string; country?: string }) => void;
}

export function ProfileDetailsPanel({ driver, isEditing, onUpdate }: ProfileDetailsPanelProps) {
  if (isEditing) {
    return (
      <Panel title="Profile Details">
        <Stack gap={6}>
          <Input
            label="Nationality (ISO Code)"
            value={driver.country}
            onChange={(e) => onUpdate?.({ country: e.target.value })}
            placeholder="e.g. US, GB, DE"
          />
          <TextArea
            label="Bio"
            value={driver.bio || ''}
            onChange={(e) => onUpdate?.({ bio: e.target.value })}
            placeholder="Tell the community about your racing career..."
          />
        </Stack>
      </Panel>
    );
  }

  return (
    <Panel title="Profile Details">
      <Stack gap={6}>
        <Stack gap={1}>
          <Text size="xs" variant="low" weight="bold" uppercase block>Nationality</Text>
          <Group gap={2}>
            <Text size="xl">
              {CountryFlagDisplay.fromCountryCode(driver.country).toString()}
            </Text>
            <Text variant="med">{driver.country}</Text>
          </Group>
        </Stack>

        <Stack gap={1}>
          <Text size="xs" variant="low" weight="bold" uppercase block>Bio</Text>
          <Text variant="med" leading="relaxed">
            {driver.bio || 'No bio provided.'}
          </Text>
        </Stack>
      </Stack>
    </Panel>
  );
}