'use client'

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

interface Registration {
  id: number
  userId: number
  username: string
  createdAt: Date
}

interface Props {
  registrations: Registration[]
}

export function EventRegistrations({ registrations }: Props) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Registrations ({registrations.length})</CardTitle>
      </CardHeader>
      <CardContent>
        {registrations.length === 0 ? (
          <p className="text-sm text-muted-foreground text-center py-4">No registrations yet.</p>
        ) : (
          <div className="divide-y max-h-[400px] overflow-y-auto">
            {registrations.map((r) => (
              <div key={r.id} className="flex items-center justify-between py-2">
                <span className="text-sm font-medium">{r.username}</span>
                <span className="text-xs text-muted-foreground">
                  {new Date(r.createdAt).toLocaleString()}
                </span>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}