Split button

import { GitMerge } from "lucide-react"
import { useState } from "react"
import { SplitButton } from "@/components/ui/split-button"

export function MergeButton() {
  const [status, setStatus] = useState("Ready to merge · 4 commits become one on main.");
  return (
    <div className="grid justify-items-center gap-3">
      <SplitButton
        menuLabel="Choose merge method"
        menuHeading="Merge method · remembered for halden-web"
        icon={<GitMerge aria-hidden="true" />}
        defaultValue="squash"
        options={[
          { value: "squash", label: "Squash and merge", description: "4 commits become one on main" },
          { value: "merge", label: "Create a merge commit", description: "Keeps all 4 commits and adds a merge" },
          { value: "rebase", label: "Rebase and merge", description: "Unavailable: 2 files conflict with main", disabled: true },
        ]}
        onValueChange={(value) => setStatus(value === "merge" ? "Ready to merge · keeps all 4 commits." : "Ready to merge · 4 commits become one on main.")}
        onRun={(value) => setStatus(`Merged #2290 into main with ${value === "merge" ? "a merge commit" : "squash"} at 14:32.`)}
      />
      <p role="status" className="text-sm text-muted-foreground">{status}</p>
    </div>
  );
}