'use client';

import { Button } from '@/ui/Button';
import { Panel } from '@/ui/Panel';
import { AccountItem } from '@/ui/AccountItem';
import { Badge } from '@/ui/Badge';
import { Globe, Link as LinkIcon } from 'lucide-react';
import React from 'react';

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

export function ConnectedAccountsPanel({ iracingId, onConnectIRacing }: ConnectedAccountsPanelProps) {
  return (
    <Panel title="Connected Accounts">
      <AccountItem
        icon={Globe}
        title="iRacing"
        description={iracingId ? `Connected ID: ${iracingId}` : 'Not connected'}
        intent="telemetry"
        action={
          iracingId ? (
            <Badge variant="success">Verified</Badge>
          ) : (
            <Button size="sm" variant="secondary" onClick={onConnectIRacing}>
              Connect
            </Button>
          )
        }
      />

      <AccountItem
        icon={LinkIcon}
        title="Discord"
        description="Connect for notifications"
        intent="primary"
        action={
          <Button size="sm" variant="secondary">
            Connect
          </Button>
        }
      />
    </Panel>
  );
}