import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';

function App() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto p-6">
        <Card>
          <CardHeader>
            <CardTitle>Quasar - Biblioteca de Videojuegos</CardTitle>
            <CardDescription>
              Aplicación para gestionar tu colección personal de videojuegos
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex gap-4">
              <Button>Botón Primario</Button>
              <Button variant="secondary">Botón Secundario</Button>
              <Button variant="outline">Botón Outline</Button>
            </div>
            <div className="space-y-2">
              <Input placeholder="Buscar juegos..." />
            </div>
            <div className="flex gap-2">
              <Badge variant="default">Etiqueta</Badge>
              <Badge variant="secondary">Secundaria</Badge>
              <Badge variant="outline">Outline</Badge>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

export default App;
