import { Button } from "@mantine/core";
import { Command } from "cmdk";
import { useMemo, useState } from "react";
interface Product {
  id: number;
  title: string;
  description: string;
  price: number;
  category: string;
  brand: string;
}
function generate5kMockProducts(): Product[] {
  const categories = [
    "Electronics",
    "Fashion",
    "Home & Living",
    "Beauty & Care",
    "Sports & Outdoors",
    "Automotive",
  ];
  const brands = ["Sony", "Samsung", "Apple", "Nike", "Adidas", "IKEA"];

  return Array.from({ length: 5000 }, (_, index) => {
    const id = index + 1;
    const category = categories[index % categories.length];
    const brand = brands[index % brands.length];

    return {
      id,
      title: `${brand} High-End Item #${id}`,
      description: `Premium ${category.toLowerCase()} product manufactured by ${brand}. High availability in stock.`,
      price: Math.floor(Math.random() * 900) + 10,
      category,
      brand,
    };
  });
}
const MOCK_PRODUCTS = generate5kMockProducts();
export default function CmdkTestDemo() {
  const [opened, setOpened] = useState(false);
  const actions = useMemo(() => {
    return MOCK_PRODUCTS.map((product) => ({
      id: String(product.id),
      label: product.title,
      description: `${product.brand} • ${product.category} - $${product.price}`,
    }));
  }, []);

  return (
    <>
      <Button onClick={() => setOpened(true)} variant="default" mb="md">
        Open Command Menu (Ctrl + K)
      </Button>

      <Command.Dialog
        open={opened}
        onOpenChange={() => setOpened(false)}
        label="Global Command Menu"
      >
        <Command.Input placeholder="Search Tab ..." autoFocus />

        <Command.List>
          <Command.Empty>No results found.</Command.Empty>
          <Command.Group>
            {actions.slice(0, 50).map((action) => (
              <Command.Item
                key={action.id}
                value={`${action.label} ${action.description}`}
              >
                <div>
                  <div>{action.label}</div>
                  <small style={{ color: "var(--mantine-color-dimmed)" }}>
                    {action.description}
                  </small>
                </div>
              </Command.Item>
            ))}
          </Command.Group>
        </Command.List>
      </Command.Dialog>
    </>
  );
}