---
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../components/ui/card";
import { Separator } from "../components/ui/separator";

import { getLangFromUrl, useTranslations } from "../i18n/utils";
const t = useTranslations(getLangFromUrl(Astro.url));

const { song } = Astro.props;
---
<Card>
	<CardHeader>
	<img
		src={song.data.image.url}
		alt={song.data.image.alt}
		class="rounded-md"
	/>
	<span class="py-2"></span>
	<CardTitle>{song.data.name[getLangFromUrl(Astro.url)]}</CardTitle>
	<CardDescription>
		<br />
		{song.data.comment[Astro.currentLocale]}
	</CardDescription>
	</CardHeader>
	<CardContent className="flex justify-evenly">
		<a href={song.data.pdfLink} download>{t("music")["downloadPDF"]}</a>
		<Separator orientation="vertical" className="mx-2 h-full"/>
		<a href={song.data.mp3Link} download>{t("music")["downloadMP3"]}</a>
		<Separator orientation="vertical" className="mx-2 h-full"/>
		<a href={song.data.flacLink} download>{t("music")["downloadFLAC"]}</a>
	</CardContent>
</Card>