import React from 'react';
import { User, Globe, LogOut, Settings } from 'lucide-react';
import { Button, Card, Input } from '../components/UI';

export const ProfilePage: React.FC = () => {
  return (
    <div className="max-w-2xl mx-auto space-y-8 animate-in fade-in pt-10">
      <div className="flex items-center space-x-4">
         <div className="h-20 w-20 rounded-full bg-primary flex items-center justify-center text-primary-foreground text-3xl font-bold">
            A
         </div>
         <div>
             <h1 className="text-2xl font-bold">Admin User</h1>
             <p className="text-muted-foreground">admin@example.com</p>
         </div>
      </div>

      <div className="grid gap-6">
        <Card className="p-6 space-y-6">
            <h2 className="text-lg font-semibold flex items-center"><User className="mr-2 h-5 w-5"/> 账户信息</h2>
            <div className="grid gap-4">
                <div className="grid gap-2">
                    <label className="text-sm font-medium">用户名</label>
                    <Input defaultValue="Admin User" />
                </div>
                 <div className="grid gap-2">
                    <label className="text-sm font-medium">邮箱</label>
                    <Input defaultValue="admin@example.com" disabled className="bg-muted"/>
                </div>
            </div>
            <div className="flex justify-end">
                <Button>保存更改</Button>
            </div>
        </Card>

        <Card className="p-6 space-y-6">
             <h2 className="text-lg font-semibold flex items-center"><Settings className="mr-2 h-5 w-5"/> 系统设置</h2>
             <div className="flex items-center justify-between">
                <div className="flex items-center space-x-2">
                    <Globe className="h-5 w-5 text-muted-foreground" />
                    <span>语言选择 / Language</span>
                </div>
                <select className="flex h-9 w-32 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
                    <option>中文</option>
                    <option>English</option>
                </select>
             </div>
        </Card>

         <Button variant="destructive" className="w-full">
            <LogOut className="mr-2 h-4 w-4" /> 退出登录
         </Button>
      </div>
    </div>
  );
};