"use client";

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { formatKES, products } from "@/lib/mock-data";

export function ResizableDemo() {
  return (
    <ResizablePanelGroup orientation="horizontal" className="h-64 rounded-lg border border-border">
      <ResizablePanel defaultSize={35} minSize={20}>
        <ul className="divide-y divide-border text-sm">
          {products.slice(0, 7).map((p) => (
            <li key={p.id} className="px-3 py-2">
              {p.name}
            </li>
          ))}
        </ul>
      </ResizablePanel>
      <ResizableHandle withHandle />
      <ResizablePanel defaultSize={65}>
        <div className="p-4 text-sm">
          <p className="font-medium">{products[0].name}</p>
          <p className="text-muted-foreground">Drag the handle to resize the list and the detail pane.</p>
          <p className="mt-2 tabular-nums">{formatKES(products[0].price, { decimals: true })}</p>
        </div>
      </ResizablePanel>
    </ResizablePanelGroup>
  );
}