Sheet

import { type SheetSide, Sheet, SheetTrigger, Button, SheetContent, SheetBody, Input, SheetFooter, SheetClose } from '@amineslab/ui'

import { useState } from 'react'

function SheetExample({ side, padding, title, closeLabel, showClose, showBack, backLabel, richContent, }: {
    side: SheetSide;
    padding: 'none' | 'md';
    title: string;
    closeLabel: string;
    showClose: boolean;
    showBack: boolean;
    backLabel: string;
    richContent: boolean;
}) {
    const [detail, setDetail] = useState(true);
    return (<Sheet>
      <SheetTrigger asChild>
        <Button variant="outline" onClick={() => setDetail(true)}>
          패널 열기
        </Button>
      </SheetTrigger>
      <SheetContent side={side} padding={padding} title={detail ? title || '빠른 설정' : '설정'} closeLabel={closeLabel} showClose={showClose} backOptions={{
            show: showBack && detail,
            onClick: () => setDetail(false),
            label: backLabel,
        }}>
        <SheetBody>
          {detail ? (<div className="grid gap-4">
              <p className="m-0 text-body-2 text-text-secondary">
                모바일에서는 전체 화면 하단 Sheet로 열립니다. 이전 버튼은 설정 목록으로 돌아갑니다.
              </p>
              {richContent &&
                Array.from({ length: 24 }, (_, index) => (<section key={index} className="grid gap-3 rounded-lg border border-elevation-700 p-4">
                    <h3 className="m-0 text-title-3">알림 설정 {index + 1}</h3>
                    <Input aria-label={`알림 ${index + 1} 이름`} placeholder="알림 이름"/>
                  </section>))}
            </div>) : (<Button variant="outline" onClick={() => setDetail(true)}>
              빠른 설정으로 이동
            </Button>)}
        </SheetBody>
        <SheetFooter>
          <SheetClose asChild>
            <Button>완료</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>);
}

export default function ExamplePreview() {
  return ((<SheetExample padding={"md"} closeLabel={"닫기"} title={"빠른 설정"} showClose={true} showBack={true} backLabel={"이전으로"} richContent={false} side={"right"}/>))
}