'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 { Button } from '@/ui/Button';
import { Globe, Link as LinkIcon } from 'lucide-react';

interface ConnectedAccountsPanelProps {
  iracingId?: string | number;
  onConnectIRacing?: () => void;
}

export function ConnectedAccountsPanel({ iracingId, onConnectIRacing }: ConnectedAccountsPanelProps) {
  return (
    <section aria-labelledby="connected-accounts-heading">
      <Card>
        <Stack gap={6}>
          <Heading level={3} id="connected-accounts-heading" fontSize="1.125rem">Connected Accounts</Heading>
          
          <Stack gap={4} className="divide-y divide-border-gray/30">
            <Stack direction="row" justify="between" align="center" pt={0}>
              <Stack direction="row" align="center" gap={3}>
                <Box backgroundColor="#1e293b" p={2} rounded="md">
                  <Globe size={20} color="#4ED4E0" />
                </Box>
                <Stack gap={0.5}>
                  <Text weight="bold" size="sm">iRacing</Text>
                  <Text size="xs" color="#9ca3af">
                    {iracingId ? `Connected ID: ${iracingId}` : 'Not connected'}
                  </Text>
                </Stack>
              </Stack>
              
              {!iracingId && (
                <Button size="sm" variant="secondary" onClick={onConnectIRacing}>
                  Connect
                </Button>
              )}
              {iracingId && (
                <Box backgroundColor="rgba(16, 185, 129, 0.1)" px={2} py={1} rounded="full">
                  <Text size="xs" color="#10b981" weight="bold">Verified</Text>
                </Box>
              )}
            </Stack>

            <Stack direction="row" justify="between" align="center" pt={4}>
              <Stack direction="row" align="center" gap={3}>
                <Box backgroundColor="#1e293b" p={2} rounded="md">
                  <LinkIcon size={20} color="#198CFF" />
                </Box>
                <Stack gap={0.5}>
                  <Text weight="bold" size="sm">Discord</Text>
                  <Text size="xs" color="#9ca3af">Connect for notifications</Text>
                </Stack>
              </Stack>
              
              <Button size="sm" variant="secondary">
                Connect
              </Button>
            </Stack>
          </Stack>
        </Stack>
      </Card>
    </section>
  );
}

import { Box } from '@/ui/Box';