'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 { 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">
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
          <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..."
          />
        </div>
      </Panel>
    );
  }

  return (
    <Panel title="Profile Details">
      <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
        <div>
          <Text size="xs" variant="low" weight="bold" uppercase block marginBottom={1}>Nationality</Text>
          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
            <Text size="xl">
              {CountryFlagDisplay.fromCountryCode(driver.country).toString()}
            </Text>
            <Text variant="med">{driver.country}</Text>
          </div>
        </div>

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