import { Badge } from "@/components/badge";
import { Button } from "@/components/button";
import { Card } from "@/components/card";

type VPSPackageCardProps = {
  name: string;
  cpu: string;
  ram: string;
  storage: string;
  price: string;
  featured?: boolean;
};

export function VPSPackageCard({ name, cpu, ram, storage, price, featured }: VPSPackageCardProps) {
  return (
    <Card className="h-full">
      <div className="flex items-start justify-between gap-4">
        <div>
          <h3 className="text-xl font-semibold text-slate-950">{name}</h3>
          <p className="mt-2 text-sm text-slate-500">Managed VPS za poslovne aplikacije.</p>
        </div>
        {featured ? <Badge tone="green">Preporuka</Badge> : null}
      </div>
      <div className="mt-6 grid gap-3 text-sm text-slate-700">
        <p>CPU: {cpu}</p>
        <p>RAM: {ram}</p>
        <p>Storage: {storage}</p>
      </div>
      <p className="mt-6 text-2xl font-semibold text-slate-950">{price}</p>
      <Button
        href="/kontakt"
        variant={featured ? "primary" : "outline"}
        className="mt-6 w-full"
        data-lead-type="vps"
        data-lead-subject={`Upit: ${name}`}
        data-source-section="VPS paket"
      >
        Zatražite procenu infrastrukture
      </Button>
    </Card>
  );
}