'use client';

import React from 'react';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Input } from '@/ui/Input';
import { TextArea } from '@/ui/TextArea';
import { CountryFlagDisplay } from '@/lib/display-objects/CountryFlagDisplay';

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 (
      <section aria-labelledby="profile-details-heading">
        <Card>
          <Stack gap={6}>
            <Heading level={3} id="profile-details-heading" fontSize="1.125rem">Profile Details</Heading>
            <Stack gap={4}>
              <Input
                label="Nationality (ISO Code)"
                value={driver.country}
                onChange={(e) => onUpdate?.({ country: e.target.value })}
                placeholder="e.g. US, GB, DE"
                maxLength={2}
              />
              <TextArea
                label="Bio"
                value={driver.bio || ''}
                onChange={(e) => onUpdate?.({ bio: e.target.value })}
                placeholder="Tell the community about your racing career..."
                rows={4}
              />
            </Stack>
          </Stack>
        </Card>
      </section>
    );
  }

  return (
    <section aria-labelledby="profile-details-heading">
      <Card>
        <Stack gap={6}>
          <Stack direction="row" justify="between" align="center">
            <Heading level={3} id="profile-details-heading" fontSize="1.125rem">Profile Details</Heading>
          </Stack>
          
          <Stack gap={4}>
            <Stack gap={1}>
              <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Nationality</Text>
              <Stack direction="row" align="center" gap={2}>
                <Text size="xl">
                  {CountryFlagDisplay.fromCountryCode(driver.country).toString()}
                </Text>
                <Text color="#d1d5db">{driver.country}</Text>
              </Stack>
            </Stack>

            <Stack gap={1}>
              <Text size="xs" color="#6b7280" weight="bold" letterSpacing="0.05em" uppercase>Bio</Text>
              <Text color="#d1d5db" lineHeight="relaxed">
                {driver.bio || 'No bio provided.'}
              </Text>
            </Stack>
          </Stack>
        </Stack>
      </Card>
    </section>
  );
}