import { useState } from "react"

import {
  SplitPanel,
  SplitPanelEmptyDetail,
  SplitPanelListHeader,
  SplitPanelListItem,
} from "./SplitPanel"

const contacts = [
  { id: "1", name: "Ada Lovelace", subtitle: "Engineering" },
  { id: "2", name: "Grace Hopper", subtitle: "Engineering" },
  { id: "3", name: "Margaret Hamilton", subtitle: "Product" },
]

export default function Example() {
  const [activeId, setActiveId] = useState<string | null>(null)
  const active = contacts.find((c) => c.id === activeId)

  return (
    <div className="h-96">
      <SplitPanel
        listWidth="w-72"
        list={
          <>
            <SplitPanelListHeader title="Contacts" />

            {contacts.map((contact) => (
              <SplitPanelListItem
                key={contact.id}
                title={contact.name}
                subtitle={contact.subtitle}
                active={contact.id === activeId}
                onClick={() => setActiveId(contact.id)}
              />
            ))}
          </>
        }
        detail={
          active ? (
            <div className="p-6">
              <h2 className="text-lg font-semibold">{active.name}</h2>
              <p className="text-sm text-muted-foreground">{active.subtitle}</p>
            </div>
          ) : (
            <SplitPanelEmptyDetail />
          )
        }
      />
    </div>
  )
}