import { useState } from "react";
import { Button } from "@/packages/ui/src/_components/buttons_variants/buttons/Button";
import Button_split from "@/packages/ui/src/_components/buttons_variants/button_split/Button_split";
import Icon from "@/packages/ui/src/_components/icon/Icon";


export default function Example() {
  const [proportion, setProportion] = useState<Proportion>("50/50");
  const [isFull, setIsFull] = useState(false);
  const [morphic, setMorphic] = useState(false);

  const splitNode = (
    <Button_split
      proportion={proportion}
      isFull={isFull}
      morphic={morphic}
      firstButton={<Button variant="secondary" outline>Secondary</Button>}
      secondButton={
        <Button variant="primary" iconPosition="left" iconContent={<Icon name="bolt" />}>
          Primary
        </Button>
      }
    />
  );

  return (
    <div style={{ display: "grid", gap: 12, alignItems: "start" }}>
      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
        {(["50/50", "70/30", "30/70", "auto/proportional", "proportional/auto"] as const).map((p) => (
          <Button
            key={p}
            variant={proportion === p ? "primary" : "secondary"}
            outline={proportion !== p}
            onClick={() => setProportion(p)}
          >
            {p}
          </Button>
        ))}
      </div>

      <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
        <Button variant={isFull ? "success" : "secondary"} onClick={() => setIsFull((v) => !v)}>
          isFull: {String(isFull)}
        </Button>
        <Button variant={morphic ? "success" : "secondary"} onClick={() => setMorphic((v) => !v)}>
          morphic: {String(morphic)}
        </Button>
      </div>

      {isFull ? (
        <div style={{ width: 520, maxWidth: "100%" }}>{splitNode}</div>
      ) : (
        <div style={{ display: "inline-block", width: "auto", maxWidth: "100%" }}>{splitNode}</div>
      )}
    </div>
  );
}