'use client'

import { trpc } from "~/app/_trpc/Client";
import * as Card from "~/components/ui/card";
import UploadMusicForm from "./_components/UploadMusicForm";
import { CollapsibleForm } from "~/app/_components/Form/Components";
import { useEffect } from "react";

export default function AdminMusicPage() {
	const { data: tracks } = trpc.music.list.useQuery();
	useEffect(() => {console.log(tracks)}, [tracks])
	return (
		<div className="w-5/6 lg:w-1/2 flex flex-col gap-3">
			{tracks && <>
				{tracks.map((t) => (
					<Card.Card key={t.id}>
						<Card.CardContent>
							<UploadMusicForm entity={t} className="w-full"/>
						</Card.CardContent>
					</Card.Card>	
				))}
			</>}
			<CollapsibleForm entityName="Track" form={UploadMusicForm}/>
		</div>
	);
}