import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import Informacion from "@/components/vistas/Informacion";
import Reporte from "@/components/vistas/Reporte";
import Link from "next/link";
import { Input } from "@/components/ui/input";

export default function ConcertList() {
  return (
    <div className="w-screen flex flex-col items-center pt-10">
      <div className="flex flex-col items-center w-[80%]">
        <Tabs defaultValue="account" className="w-full">
          <div className="w-full flex">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="info">Información</TabsTrigger>
              <TabsTrigger value="reportes">Reportes</TabsTrigger>
            </TabsList>
            <Link href="/carrito">
              <img src="/carrito.svg" alt="carrito" className="h-10 w-10" />
            </Link>
          </div>
          <TabsContent value="info">
            <Card>
              <CardHeader>
                <CardTitle></CardTitle>
                <CardDescription></CardDescription>
              </CardHeader>
              <CardContent className="space-y-2">
                <Informacion />
              </CardContent>
              <CardFooter></CardFooter>
            </Card>
          </TabsContent>
          <TabsContent value="reportes">
            <Card>
              <CardHeader>
                <CardTitle></CardTitle>
                <CardDescription></CardDescription>
              </CardHeader>
              <CardContent className="space-y-2">
                <Reporte />
              </CardContent>
              <CardFooter></CardFooter>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}
