Bento Grid 2

"use client";

import { useState } from "react";
import {
    BentoGridTemplateTwo,
    BentoItem,
} from "@/registry/blocks/bento-grid/two/bento-grid-template-two";

const sampleBentoData: BentoItem[] = [
    {
        id: "design-system",
        title: "Visual Design System",
        description: "A comprehensive blueprint system built for layout structure.",
        size: "large",
        tag: "Blueprint",
        link: "#design",
    },
    {
        id: "ai-studio",
        title: "AI Studio",
        description: "Train and run agent prompting nodes with simple inputs.",
        size: "small",
        tag: "Active",
        link: "#ai",
    },
    {
        id: "analytics",
        title: "Analytics Engine",
        description: "Real-time metric telemetry and sparkline graphing.",
        size: "small",
        tag: "Live",
        link: "#analytics",
    },
    {
        id: "cloud-platform",
        title: "Cloud Delivery Edge",
        description: "Globally distributed regional edge nodes with real-time status reporting.",
        size: "wide",
        tag: "Edge",
        link: "#cloud",
    },
    {
        id: "security",
        title: "Security Suite",
        description: "Enterprise access control with JWT signature validation.",
        size: "small",
        tag: "Secure",
        link: "#security",
    },
    {
        id: "dev-hub",
        title: "Developer Hub",
        description: "CLI components and automated workspace setups.",
        size: "small",
        tag: "CLI Tool",
        link: "#docs",
    },
    {
        id: "collaboration",
        title: "Realtime Collaboration",
        description: "Multiplayer live presence cursors and shared scaling viewports.",
        size: "small",
        tag: "Multiplayer",
        link: "#collaboration",
    },
    {
        id: "community",
        title: "Community & Integrations",
        description: "Sync schemas across third-party operations pipelines.",
        size: "small",
        tag: "Sync Ready",
        link: "#community",
    },
];

export default function BentoGridTwo() {
    const [items] = useState<BentoItem[]>(sampleBentoData);

    return (
        <div className="container mx-auto px-4 py-16 md:py-24">
            <BentoGridTemplateTwo items={items} gap={6} animate={true} />
        </div>
    );
}