import React, { ReactNode } from "react";
import type { VariantProps } from "class-variance-authority";
import { buttonVariants } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Container } from "@/components/container/components/container";
import { PricingCard } from "@/components/pricing-card/components/pricing-card";

interface Pricing1Props {
  badge: string;
  title: ReactNode;
  description?: string;
  pricingCards: {
    overline: string;
    price: number;
    currency: string;
    buttonProps: {
      href: string;
      label: string;
      variant: VariantProps<typeof buttonVariants>["variant"];
      size: VariantProps<typeof buttonVariants>["size"];
    };
    features: {
      title: string;
      helperText?: string;
      isIncluded?: boolean;
    }[];
    terms?: string;
  }[];
}

const PRICING_CARDS_DATA: Pricing1Props["pricingCards"] = [
  {
    overline: "Starter",
    price: 0,
    currency: "USD",
    buttonProps: {
      href: "#",
      label: "Get started",
      variant: "secondary",
      size: "lg",
    },
    features: [
      {
        title: "Up to 3 projects",
        helperText: "Create up to three active projects.",
      },
      { title: "1 seat", helperText: "Single user; add seats on paid plans." },
      { title: "Basic analytics", helperText: "Page views and sign‑ups only." },
      {
        title: "Community support",
        helperText: "Forum support; typical 48–72h response.",
      },
      {
        title: "Email reports",
        isIncluded: false,
        helperText: "Included on Pro and above",
      },
      {
        title: "API access",
        isIncluded: false,
        helperText: "Included on Hobby and above",
      },
    ],
    terms: "One-time payment, plus local taxes.",
  },
  {
    overline: "Hobby",
    price: 12,
    currency: "USD",
    buttonProps: {
      href: "#",
      label: "Start Hobby",
      variant: "default",
      size: "lg",
    },
    features: [
      {
        title: "Up to 10 projects",
        helperText: "Ten active projects per workspace.",
      },
      { title: "1 seat", helperText: "Add more seats as you grow." },
      {
        title: "Email reports",
        helperText: "Weekly summaries delivered to your inbox.",
      },
      { title: "API access", helperText: "Standard rate limits apply." },
      {
        title: "Basic analytics",
        helperText: "Traffic, conversions and top pages.",
      },
      { title: "Exports", helperText: "CSV exports up to 50k rows per month." },
      {
        title: "Automations (limited)",
        helperText: "Caps apply; full access on Pro",
      },
    ],
    terms: "One-time payment, plus local taxes.",
  },
  {
    overline: "Pro",
    price: 19,
    currency: "USD",
    buttonProps: {
      href: "#",
      label: "Upgrade to Pro",
      variant: "secondary",
      size: "lg",
    },
    features: [
      { title: "Unlimited projects", helperText: "Fair‑use policy applies." },
      { title: "5 seats", helperText: "Includes role management and invites." },
      {
        title: "Email reports",
        helperText: "Daily and weekly scheduling available.",
      },
      {
        title: "API access",
        helperText: "Increased rate limits and burst capacity.",
      },
      {
        title: "Advanced analytics",
        helperText: "Funnels, retention and cohort analysis.",
      },
      { title: "Priority support", helperText: "Same‑business‑day responses." },
      {
        title: "Team access",
        helperText: "Collaborate across projects with shared permissions.",
      },
    ],
    terms: "One-time payment, plus local taxes.",
  },
];

export function Pricing1({
  badge = "Pricing",
  title = "Prices so good they’re in tiers",
  description = "At DeepSmart, we make practical AI tools for people who build things. No hype, no sentient robots — just systems that save time and reduce hassle.",
  pricingCards = PRICING_CARDS_DATA,
}: Pricing1Props) {
  return (
    <Container
      className="grid gap-6 mx-auto max-w-7xl"
      wrapperClassName="py-32"
    >
      <div className="@container grid gap-4 content-start">
        <Badge variant="outline" className="rounded-full">
          {badge}
        </Badge>

        <p className="text-4xl @md:text-5xl font-display text-balance tracking-tight">
          {title}
        </p>
        {description ? (
          <p className="text-lg text-foreground/60 max-w-[60ch]">
            {description}
          </p>
        ) : null}
        <div className="max-md:max-w-lg max-md:w-full max-md:mx-auto max-md:space-y-4 mt-4 md:grid md:grid-cols-3 md:gap-4 @md:mt-10">
          {pricingCards.map((pricingCard) => (
            <PricingCard key={pricingCard.price} {...pricingCard} />
          ))}
        </div>
      </div>
    </Container>
  );
}
Pricing blocks
