import { useId, useState } from "react"
import { Card, CardContent, Button, Label, Input, Checkbox, Switch } from "@hm-design/ui"
import { Heading } from "./Heading"

export function Permissions() {
  const id = useId()
  const [edit, setEdit] = useState(false)
  const [notice, setNotice] = useState(true)
  const [status, setStatus] = useState("")
  return <><Heading title="권한 설정" description="편집 권한과 알림 설정을 저장합니다."/><Card><CardContent><div className="quality-fields"><Label htmlFor={`${id}-account`}>계정</Label><Input id={`${id}-account`} readOnly value="hm-design"/>
    <div className="flex items-center gap-2"><Checkbox id={`${id}-edit`} checked={edit} onCheckedChange={v => setEdit(v === true)}/><Label htmlFor={`${id}-edit`}>편집 권한</Label></div>
    <div className="flex items-center gap-2"><Switch id={`${id}-notice`} checked={notice} onCheckedChange={setNotice}/><Label htmlFor={`${id}-notice`}>알림 수신</Label></div><Button onClick={() => setStatus(`저장 완료 · 편집 ${edit ? "허용" : "불가"} · 알림 ${notice ? "켜짐" : "꺼짐"}`)}>저장</Button><p role="status">{status}</p>
  </div></CardContent></Card></>
}