'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import type { SecuritySettings, TrustedDevice } from '../types';

interface TrustedDevicesProps {
  devices: TrustedDevice[];
  onUpdate: (updates: Partial<SecuritySettings>) => void;
}

export function TrustedDevices({ devices, onUpdate }: TrustedDevicesProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>信任设备</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {devices.map((device) => (
            <div
              key={device.id}
              className={`p-4 border rounded-lg ${
                device.isCurrent ? 'border-blue-500 bg-blue-50' : 'border-gray-200'
              }`}
            >
              <div className="flex items-center justify-between">
                <div>
                  <div className="flex items-center space-x-2">
                    <p className="font-medium">{device.deviceName}</p>
                    {device.isCurrent && (
                      <span className="text-xs bg-blue-500 text-white px-2 py-1 rounded">
                        当前设备
                      </span>
                    )}
                  </div>
                  <p className="text-sm text-gray-600">
                    {device.browser} • {device.os}
                  </p>
                  <p className="text-xs text-gray-500">
                    {device.ipAddress} • {device.location}
                  </p>
                </div>
                <div className="text-right">
                  <p className="text-xs text-gray-500">
                    最后活动: {new Date(device.lastActive).toLocaleString('zh-CN')}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}