---
import TerminalBorder from "@components/TerminalBorder.astro";
import Link from "@components/Link.astro";

interface Props {
    title: string;
    description: string;
    href: string;
    cd?: string;
    dir?: string;
}

const { title, description, href, cd = title, dir = "cd ~/projects/" } = Astro.props;
---

<div class="flex-column mt-[1vw] mx-[1vw] mb-[5vw] sm:m-0">
    <TerminalBorder>
        <span>
            <h1 class="inline-block text-[130%] text-[var(--accent)]">{title}</h1>
            <p class="inline-block text-[var(--secondary)]">{description}</p>
            <span class="block my-[3vw] sm:my-[0.625vw]"><slot /></span>
        </span>
    </TerminalBorder>
    <TerminalBorder header="Shell">
        <Link href={href}>{dir}{cd}</Link>
    </TerminalBorder>
</div>