"use client";

import * as React from "react"

import { AlignLeft, AlignCenter, AlignRight, AlignJustify } from "lucide-react"

import { ToggleGroup, ToggleGroupItem } from "./toggle-group"

export function ToggleGroupDemo() {

const [value, setValue] = React.useState("left")

return (

<div className="w-full h-full flex items-center justify-center p-8">

<ToggleGroup value={value} onValueChange={setValue}>

<ToggleGroupItem value="left" aria-label="Align left">

<AlignLeft className="w-4 h-4" />

</ToggleGroupItem>

<ToggleGroupItem value="center" aria-label="Align center">

<AlignCenter className="w-4 h-4" />

</ToggleGroupItem>

<ToggleGroupItem value="right" aria-label="Align right">

<AlignRight className="w-4 h-4" />

</ToggleGroupItem>

<ToggleGroupItem value="justify" aria-label="Align justify">

<AlignJustify className="w-4 h-4" />

</ToggleGroupItem>

</ToggleGroup>

</div>

)

}