import { ConnectedAccountsPanel } from '@/components/profile/ConnectedAccountsPanel';
import { PreferencesPanel } from '@/components/profile/PreferencesPanel';
import { ProfileDetailsPanel } from '@/components/profile/ProfileDetailsPanel';
import type { ProfileViewData } from '@/lib/view-data/ProfileViewData';
import { Box } from '@/ui/Box';
import { Button } from '@/ui/Button';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/Stack';

interface ProfileSettingsTemplateProps {
  viewData: ProfileViewData;
  bio: string;
  country: string;
  onBioChange: (bio: string) => void;
  onCountryChange: (country: string) => void;
  onSave: () => void;
}

export function ProfileSettingsTemplate({ 
  viewData, 
  bio, 
  country, 
  onBioChange, 
  onCountryChange, 
  onSave 
}: ProfileSettingsTemplateProps) {
  return (
    <Stack gap={8}>
      <Box as="header">
        <Stack direction="row" justify="between" align="center">
          <Heading level={1}>Settings</Heading>
          <Button variant="primary" onClick={onSave}>Save Changes</Button>
        </Stack>
      </Box>

      <ProfileDetailsPanel 
        driver={{
          name: viewData.driver.name,
          country: country,
          bio: bio
        }}
        isEditing
        onUpdate={(updates) => {
          if (updates.bio !== undefined) onBioChange(updates.bio);
          if (updates.country !== undefined) onCountryChange(updates.country);
        }}
      />

      <ConnectedAccountsPanel 
        iracingId={viewData.driver.iracingId || undefined}
      />

      <PreferencesPanel 
        preferences={{
          favoriteCarClass: 'GT3',
          favoriteSeries: 'Endurance',
          competitiveLevel: 'competitive',
          showProfile: true,
          showHistory: true
        }}
        isEditing
      />
    </Stack>
  );
}