import type { LucideIcon } from "lucide-react";
import { CheckCircle2 } from "lucide-react";

interface PackageCardProps {
  icon: LucideIcon;
  title: string;
  description: string;
  features: string[];
  featuresHeading?: string;
  pricing?: { label: string; value: string }[];
  centered?: boolean;
}

export function PackageCard({
  icon: Icon,
  title,
  description,
  features,
  featuresHeading,
  pricing,
  centered,
}: PackageCardProps) {
  return (
    <div className={`group flex flex-col rounded-xl border border-border bg-card p-8 transition-colors hover:border-primary/30 ${centered ? "items-center text-center" : ""}`}>
      <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
        <Icon className="h-6 w-6 text-primary" />
      </div>
      <h3 className="text-lg font-semibold text-card-foreground">{title}</h3>
      {description && (
        <p className="mt-3 whitespace-pre-line leading-relaxed text-muted-foreground">
          {description}
        </p>
      )}
      {featuresHeading && (
        <p className={`mt-6 border-t border-border pt-6 text-sm font-semibold text-card-foreground ${centered ? "w-full" : ""}`}>
          {featuresHeading}
        </p>
      )}
      <ul className={`flex flex-col gap-3 ${featuresHeading ? "mt-3" : "mt-6 border-t border-border pt-6"} ${centered ? "w-full items-center" : ""}`}>
        {features.map((feature) => (
          <li key={feature} className={`flex items-start gap-3 ${centered ? "justify-center" : ""}`}>
            <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-[hsl(var(--accent))]" />
            <span className="text-sm text-muted-foreground">{feature}</span>
          </li>
        ))}
      </ul>
      {pricing && (
        <div className={`mt-6 border-t border-border pt-6 ${centered ? "w-full" : ""}`}>
          <p className="text-sm font-semibold text-card-foreground">Pricing</p>
          <div className="mt-2 flex flex-col gap-1">
            {pricing.map((item) => (
              <p key={item.label} className="text-sm text-muted-foreground">
                <span className="font-medium text-card-foreground">{item.label}:</span>{" "}
                {item.value}
              </p>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}