"use client"

import { Button } from "@/components/ui/button"
import Link from "next/link"
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"

export interface Profile {
    id: string
    full_name: string
    role: string
    created_at: string
}

interface UsersTableProps {
    users: Profile[]
}

export function UsersTable({ users }: UsersTableProps) {
    return (
        <div className="space-y-4">
            <div className="flex items-center justify-between space-y-2">
                <h3 className="text-lg font-medium">Kullanıcı Listesi</h3>
                <Link href="/dashboard/users/new?returnTo=/dashboard/settings">
                    <Button size="sm">Yeni Kullanıcı</Button>
                </Link>
            </div>
            <div className="rounded-md border">
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Ad Soyad</TableHead>
                            <TableHead>Rol</TableHead>
                            <TableHead>Kayıt Tarihi</TableHead>
                            <TableHead className="text-right">İşlemler</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {users?.map((profile) => (
                            <TableRow key={profile.id}>
                                <TableCell className="font-medium">{profile.full_name}</TableCell>
                                <TableCell>
                                    <Badge variant={profile.role === 'admin' ? 'default' : 'secondary'}>
                                        {profile.role === 'admin' ? 'Yönetici' : 'Kullanıcı'}
                                    </Badge>
                                </TableCell>
                                <TableCell>{new Date(profile.created_at).toLocaleDateString('tr-TR')}</TableCell>
                                <TableCell className="text-right">
                                    <Link href={`/dashboard/users/${profile.id}`}>
                                        <Button variant="ghost" size="sm">Düzenle</Button>
                                    </Link>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </div>
        </div>
    )
}