import { type ExtendedUser } from '@/config/auth'
import { Card, CardContent, CardHeader } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'

interface UserInfoProps {
  user?: ExtendedUser
  label: string
}

export const UserInfo = ({ user, label }: UserInfoProps) => {
  return (
    <Card className={`max-w-[430px] w-full sm:min-w-[430px] shadow-md`}>
      <CardHeader>
        <p className="text-2xl font-semibold text-center">
          {label}
        </p>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="flex flex-row justify-between items-center rounded-lg border p-3 shadow-sm">
          <span className="text-sm font-medium">ID</span>
          <span className="trancate text-xs max-w-[180px] font-mono p-1 bg-slate-100 rounded-md">{user?.id}</span>
        </div>
        <div className="flex flex-row justify-between items-center rounded-lg border p-3 shadow-sm">
          <span className="text-sm font-medium">Name</span>
          <span className="trancate text-xs max-w-[180px] font-mono p-1 bg-slate-100 rounded-md">{user?.name}</span>
        </div>
        <div className="flex flex-row justify-between items-center rounded-lg border p-3 shadow-sm">
          <span className="text-sm font-medium">Email</span>
          <span className="trancate text-xs max-w-[180px] font-mono p-1 bg-slate-100 rounded-md">{user?.email}</span>
        </div>
        <div className="flex flex-row justify-between items-center rounded-lg border p-3 shadow-sm">
          <span className="text-sm font-medium">Role</span>
          <span className="trancate text-xs max-w-[180px] font-mono p-1 bg-slate-100 rounded-md">{user?.role}</span>
        </div>
        <div className="flex flex-row justify-between items-center rounded-lg border p-3 shadow-sm">
          <span className="text-sm font-medium">Two factor authentication</span>
          <Badge variant={user?.isTwoFactorEnabled ? 'success' : 'destructive'}>
            {user?.isTwoFactorEnabled ? 'ON' : 'OFF'}
          </Badge>
        </div>
      </CardContent>
    </Card>
  )
}