import React, { ReactNode } from "react";
import { Badge } from "@/components/ui/badge";
import {
  StatsItem,
  StatsValue,
  StatsLabel,
} from "@/components/stats/components/stats";
import { Container } from "@/components/container/components/container";
import { Image } from "@/components/image/components/image";

const STATS = [
  { value: "99.9%", label: "User uptake" },
  { value: "1,500+", label: "Downloads per month" },
  { value: "3000+", label: "Devs trust us" },
  { value: "$100m", label: "imaginary revenue" },
];

interface Stats1Props {
  badge: string;
  title: ReactNode;
  description?: string;
  stats: { value: string; label: string }[];
  imageUrl: string;
}

export function Stats1({
  badge = "Features",
  title = (
    <p className="text-4xl @md:text-5xl font-display text-balance tracking-tight">
      Results you can <span className="text-primary italic">count</span> on.
    </p>
  ),
  description = "Deepsmart gives you the kind of templates and tools that just work - no bloat, no filler, no waiting for design inspiration to strike. Try it today!",
  stats = STATS,
  imageUrl = "https://images.unsplash.com/photo-1666537072157-440346cea066?&auto=format&fit=crop&q=80&w=1000&h=700",
}: Stats1Props) {
  return (
    <Container
      className="grid gap-6 mx-auto max-w-7xl md:grid-cols-2"
      wrapperClassName="py-32"
    >
      <div className="@container grid gap-4 content-start py-4">
        <Badge variant="outline" className="rounded-full">
          {badge}
        </Badge>
        {title}
        {description ? (
          <p className="text-lg text-foreground/60">{description}</p>
        ) : null}
        <div className="grid grid-cols-[auto_auto] gap-8 gap-x-24 mt-4 justify-start">
          {stats.map((stat, index) => (
            <StatsItem
              className="tracking-tighter"
              key={`stat-${index}-${stat.label}`}
            >
              <StatsValue
                className="!font-medium"
                value={stat.value}
                animated={false}
                size="md"
              />
              <StatsLabel>{stat.label}</StatsLabel>
            </StatsItem>
          ))}
        </div>
      </div>
      <div className="border bg-gradient-to-tr from-background to-border rounded-[20px] p-1.5 grid">
        <Image
          className="border object-cover rounded-2xl shadow-md w-full h-full"
          src={imageUrl}
        />
      </div>
    </Container>
  );
}
Stats blocks
