import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"

export function DemoAccountsInfo() {
  const demoAccounts = [
    {
      type: "Student Account 1",
      serial: "FU20250001",
      pin: "DEMO1234",
      email: "demo.student1@fanaka.edu",
      status: "In Progress",
      program: "Computer Science (Undergraduate)",
    },
    {
      type: "Student Account 2",
      serial: "FU20250002",
      pin: "DEMO5678",
      email: "demo.student2@fanaka.edu",
      status: "Submitted",
      program: "Business Administration (Postgraduate)",
    },
    {
      type: "Student Account 3",
      serial: "FU20250003",
      pin: "DEMO9012",
      email: "demo.student3@fanaka.edu",
      status: "Under Review",
      program: "Engineering (Undergraduate)",
    },
    {
      type: "Admin Account",
      username: "admin",
      password: "admin123",
      email: "admin@fanaka.edu",
      role: "Administrator",
      access: "Full admin dashboard access",
    },
    {
      type: "Reviewer Account",
      username: "reviewer",
      password: "reviewer123",
      email: "reviewer@fanaka.edu",
      role: "Application Reviewer",
      access: "Application review access",
    },
  ]

  return (
    <div className="space-y-4">
      <div className="text-center mb-6">
        <h2 className="text-2xl font-bold text-primary mb-2">Demo Accounts</h2>
        <p className="text-muted-foreground">Use these accounts to test the application portal</p>
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {demoAccounts.map((account, index) => (
          <Card key={index} className="h-full">
            <CardHeader>
              <CardTitle className="text-lg">{account.type}</CardTitle>
              <CardDescription>
                {"serial" in account ? "Student Login Credentials" : "Admin Login Credentials"}
              </CardDescription>
            </CardHeader>
            <CardContent className="space-y-2">
              {"serial" in account ? (
                <>
                  <div>
                    <span className="font-medium">Serial:</span> {account.serial}
                  </div>
                  <div>
                    <span className="font-medium">PIN:</span> {account.pin}
                  </div>
                  <div>
                    <span className="font-medium">Email:</span> {account.email}
                  </div>
                  <div>
                    <span className="font-medium">Program:</span> {account.program}
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="font-medium">Status:</span>
                    <Badge
                      variant={
                        account.status === "Submitted"
                          ? "default"
                          : account.status === "Under Review"
                            ? "secondary"
                            : "outline"
                      }
                    >
                      {account.status}
                    </Badge>
                  </div>
                </>
              ) : (
                <>
                  <div>
                    <span className="font-medium">Username:</span> {account.username}
                  </div>
                  <div>
                    <span className="font-medium">Password:</span> {account.password}
                  </div>
                  <div>
                    <span className="font-medium">Email:</span> {account.email}
                  </div>
                  <div>
                    <span className="font-medium">Role:</span> {account.role}
                  </div>
                  <div>
                    <span className="font-medium">Access:</span> {account.access}
                  </div>
                </>
              )}
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}