export default function LicenseCard({
  name,
  validUntil,
}: {
  name: string;
  validUntil: string;
}) {
  return (
    <div className="text-sm p-2 border rounded-xl flex flex-col md:flex-row md:items-center justify-between">
      <div className="flex items-center">
        <div className="rounded-md bg-green-500 size-16 items-center justify-center flex">
          <p className="m-2 font-semibold truncate">{name}</p>
        </div>
        <div className="ml-3 justify-center flex flex-col">
          <div className="flex items-center">
            <Verified size={18} className="text-primary" />
            <h1 className="text-base ml-1.5 font-semibold">Name: {name}</h1>
          </div>
          <p className="text-muted-foreground">Valid until: {validUntil}</p>
        </div>
      </div>
      <Button
        variant="secondary"
        disabled
        className="w-full mt-4 md:mt-0 md:ml-4 md:w-auto"
      >
        Manage Subscription
      </Button>
    </div>
  );
}

 <CardContent className="space-y-4">
            <LicenseCard key="key" name="name" validUntil="validUntil" />
          </CardContent>