sarlink-portal/components/agreement-card.tsx

import { EyeIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
	Card,
	CardDescription,
	CardFooter,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";

export function AgreementCard({ agreement }: { agreement: string }) {
	return (
		<Card className="w-full max-w-sm">
			<CardHeader>
				<CardTitle>Sarlink User Agreement</CardTitle>
				<CardDescription>User agreement for Sarlink services.</CardDescription>
			</CardHeader>
			<CardFooter className="flex-col gap-2">
				<a
					target="_blank"
					rel="noopener noreferrer"
					className="w-full hover:cursor-pointer"
					href={agreement}
				>
					<Button type="button" className="w-full hover:cursor-pointer">
						<EyeIcon />
						View Agreement
					</Button>
				</a>
			</CardFooter>
		</Card>
	);
}