import PageIntro, { StHighlight } from "@/components/common/PageIntro";

export function Example() {
  return (
    <PageIntro
      icon="🐰"
      title="황총무의 약속잡기"
      description={
        <>
          모임 일정을 <StHighlight $color="blue">빠르게</StHighlight> 모아주는 도구
        </>
      }
    />
  );
}

import CreateButton from "@/components/common/CreateButton";

export function Example() {
  return (
    <>
      <CreateButton onClick={handleCreate}>약속 만들기</CreateButton>
      <CreateButton bgColor="#3B82F6" isLoading loadingText="저장 중...">
        저장하기
      </CreateButton>
    </>
  );
}

import { useModal } from "@/components/common/ModalProvider";

export function Example() {
  const { openAlert, openConfirm } = useModal();

  async function handleDelete() {
    const ok = await openConfirm("정말 삭제할까요?");
    if (!ok) return;
    await deleteItem();
    await openAlert("삭제되었습니다.");
  }

  return <button onClick={handleDelete}>삭제</button>;
}

import Switch from "@/components/common/Switch";

export function Example() {
  const [on, setOn] = useState(false);
  return <Switch checked={on} onChange={setOn} label="알림 켜기" />;
}

import TagInput from "@/components/common/TagInput";

export function Example() {
  const [tags, setTags] = useState<string[]>([]);
  return (
    <TagInput
      label="참석자"
      placeholder="이름 입력 후 Enter"
      tags={tags}
      onChange={setTags}
    />
  );
}

import ColorPickerPanel from "@/components/common/ColorPickerPanel";

const PRESETS = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#6366F1"];

export function Example() {
  const [color, setColor] = useState(PRESETS[0]);
  return (
    <ColorPickerPanel
      colors={PRESETS}
      selectedColor={color}
      onSelect={setColor}
    />
  );
}

import ShareButton from "@/components/common/ShareButton";

export function Example() {
  return <ShareButton iconSize={20} />;
}

import FooterGuide from "@/components/common/FooterGuide";

export function Example() {
  return (
    <FooterGuide
      title="약속 잡기 꿀팁"
      story={{
        title: "왜 황총무가 만들어졌을까요?",
        content: <>친구들끼리 일정 맞추기 너무 힘드셨죠?</>,
      }}
      tips={[
        { icon: "🗓️", title: "한 번에 정리", description: "안되는 날만 클릭" },
        { icon: "🔔", title: "공유는 링크로", description: "URL만 보내면 끝" },
      ]}
    />
  );
}