"use client";

import { useState, type ReactNode } from "react";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import { cn } from "@/lib/utils";

export function CommissionTicketPanels({ summary, chat }: { summary: ReactNode; chat: ReactNode }) {
  const [active, setActive] = useState<"chat" | "summary">("chat");
  return <div className="flex min-h-0 flex-1 flex-col gap-2 lg:grid lg:grid-cols-[minmax(0,300px)_minmax(0,1fr)] lg:grid-rows-[minmax(0,1fr)] lg:gap-4">
    <ToggleGroup aria-label="ส่วนของ Ticket" variant="outline" size="sm" value={[active]}
      onValueChange={(values) => { if (values[0] === "chat" || values[0] === "summary") setActive(values[0]); }}
      className="shrink-0 lg:hidden">
      <ToggleGroupItem value="chat">แชต</ToggleGroupItem>
      <ToggleGroupItem value="summary">รายละเอียดคำขอ</ToggleGroupItem>
    </ToggleGroup>
    <div className={cn("min-h-0 min-w-0 flex-1", active !== "summary" && "hidden lg:block")}>{summary}</div>
    <div className={cn("min-h-0 min-w-0 flex-1", active !== "chat" && "hidden lg:block")}>{chat}</div>
  </div>;
}