import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"
import { Info } from "lucide-react"

const LoginPage = () => {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-background px-4">
      <div className="w-full max-w-md space-y-8">
        <Alert>
          <Info className="h-4 w-4" />
          <AlertTitle>Comptes de test</AlertTitle>
          <AlertDescription className="space-y-2">
            <div className="text-sm">
              <p className="font-medium">Admin:</p>
              <p>Email: admin@musicapp.com</p>
              <p>Mot de passe: admin123</p>
            </div>
            <div className="text-sm">
              <p className="font-medium">Artiste (Souleymane):</p>
              <p>Email: sallkidal2@gmail.com</p>
              <p>Mot de passe: artist123</p>
            </div>
            <div className="text-sm">
              <p className="font-medium">Artiste (Demo Artist):</p>
              <p>Email: artist@musicapp.com</p>
              <p>Mot de passe: artist123</p>
            </div>
          </AlertDescription>
        </Alert>

        {/* ... existing code here ... */}
      </div>
    </div>
  )
}

export default LoginPage
