import { trpc } from "~/app/_trpc/Client"
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
import { Skeleton } from "~/components/ui/skeleton"
import { cn, type Defined } from "~/lib/utils"
import Markdown from 'react-markdown'
import { format } from 'date-fns'
import rehypeHighlight from 'rehype-highlight'
import rehypeRaw from 'rehype-raw'
import type { RouterOutputs } from "~/server/routers/_app"
import type { ArrayElement } from "type-fest"
export default function CvEntry(params: {
	initialData: ArrayElement<Defined<RouterOutputs['categoryv2']['getById']>['cvEntry']>,
	className?: string
}) {
	const query = trpc.entryv2.getById.useQuery(params.initialData.id);
	const { data, isError, error } = query
	return (
		<>
			{
				data ?
					<>
						<Card className={params.className ? cn("w-fit", params.className) : "w-fit"}>
							{
								data.title ?
									<CardHeader>
										<CardTitle> {data.title} </CardTitle>
									</CardHeader> :
									<></>
							}
							{
								data.description ?
									<CardContent className="text-sm lg:text-base">
										<article className="prose prose-zinc dark:prose-invert max-w-none">
											<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
										</article>
									</CardContent> :
									<></>
							}
							{
								!data.hideDates ?
									<CardFooter className="text-sm">
										{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
									</CardFooter> :
									<></>
							}
						</Card>
					</> :
					<>
						<Card>
							<CardHeader>
								<div className="flex flex-row">
									<CardTitle> <Skeleton className="h-2rem w-5rem" /> </CardTitle>
									<span className="ml-auto text-sm"> <Skeleton className="h-1rem w-3rem" /> - <Skeleton className="h-1rem w-3rem" /> </span>
								</div>
							</CardHeader>
							<CardContent>
								<div>
									<Skeleton className="h-4 w-60" />
									<Skeleton className="h-4 w-50" />
									<Skeleton className="h-4 w-50" />
								</div>
							</CardContent>
						</Card>
					</>
			}
		</>
	)
}