import { createClient } from "@/lib/supabase-server"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default async function ProfilePage() {
    const supabase = createClient()
    const { data: { user } } = await supabase.auth.getUser()

    return (
        <div className="flex-1 space-y-4 p-8 pt-6">
            <div className="flex items-center justify-between space-y-2">
                <h2 className="text-3xl font-bold tracking-tight">Profil</h2>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
                <Card>
                    <CardHeader>
                        <CardTitle>Genel Bilgiler</CardTitle>
                        <CardDescription>
                            Kişisel profil bilgileriniz.
                        </CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                        <div className="flex items-center space-x-4">
                            <Avatar className="h-20 w-20">
                                <AvatarImage src="/avatars/01.png" alt="@parakasa" />
                                <AvatarFallback>PK</AvatarFallback>
                            </Avatar>
                            <Button variant="outline">Fotoğraf Değiştir</Button>
                        </div>

                        <div className="space-y-1">
                            <Label htmlFor="email">E-posta</Label>
                            <Input id="email" value={user?.email || ""} disabled />
                            <p className="text-xs text-muted-foreground">E-posta adresi değiştirilemez.</p>
                        </div>

                        <div className="space-y-1">
                            <Label htmlFor="role">Rol</Label>
                            <Input id="role" value={user?.role === 'authenticated' ? 'Yönetici' : 'Kullanıcı'} disabled />
                        </div>
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}