// SpaceInfo 컴포넌트
interface SpaceInfoProps {
  type: 'read' | 'create' | 'update';
  inputText?: '' | string;
  data?: { name: string; imageUrl: string; id: number } | undefined;
}

const SpaceInfo: React.FC<SpaceInfoProps> = ({ type = 'read', inputText = '', data }) => {
  const { onChangeSpaceName, onClickEditSpaceInfo, ... } = useSpaceInfo(data, type);

  return (
    <div css={/*SpaceInfo 스타일*/}>
        {...}
        <p>공간 정보</p>
        {type === 'read' ? (
            <Button type="button" onClick={onClickEditSpaceInfo}>수정하기</Button>
        ) : (
            <Button type="submit">{type === 'create' ? '생성하기' : '수정완료'}</Button>
        )}
        {...}
        <p>공간 이름</p>
        {type === 'read' ? (
            <input name="nameInput" type="text" defaultValue={data?.name} readOnly />
        ) : (
            <input
                name="nameInput"
                placeholder="이름을 입력하세요"
                type="text"
                defaultValue={data?.name || inputText || ''}
                onChange={onChangeSpaceName}
                required
            />
        )}
        {...}
    </div>
  );
};

// 공간 정보 생성 페이지
const SpaceCreate: React.FC = () => {
  const { onSubmitCreateSpace } = useSpaceForm();

  return (
    <div css={/*SpaceCreate 스타일*/}>
        <form onSubmit={onSubmitCreateSpace} encType="multipart/form-data">
            <SpaceInfo type={'create'} />
        </form>
    </div>
  );
};

// 공간 정보 보기 페이지
const DashBoard: React.FC = () => {
  const {
    spaceData,
    ...
  } = useDashBoard();

  return (
    <div css={/*DashBoard 스타일*/}>
        {...}
        <SpaceInfo type={'read'} data={spaceData} />
    </div>
  );
};

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
</select>

interface SpaceInfoHeaderProps {
  children: React.ReactNode;
}

interface SpaceNameTextProps {
  children: React.ReactNode;
}

const SpaceInfoHeader: React.FC<SpaceInfoHeaderProps> = ({ children }) => {
  return <div css={/*SpaceInfoHeader 스타일*/}>{children}</div>;
};

const SpaceNameText: React.FC<SpaceNameTextProps> = ({ children }) => {
  return <p css={/*SpaceNameText 스타일*/}>{children}</p>;
};

// ... SpaceInfo 서브 컴포넌트

interface SpaceInfoMainProps {
  children: React.ReactNode;
}

const SpaceInfoMain: React.FC<SpaceInfoMainProps> = ({ children }) => {
  return <div css={/*SpaceInfoMain 스타일*/}>{children}</div>;
};

export const SpaceInfo = Object.assign(SpaceInfoMain, {
  header: SpaceInfoHeader,
  ImageBox: SpaceInfoImage,
  InputBox: SpaceInfoInput,
  nameText: SpaceNameText,
  ...
});

// Usage
<SpaceInfo>
    <SpaceInfo.header>
        <button>생성하기</button>
    </SpaceInfo.header>
    {...}
</SpaceInfo>

// 공간 정보 생성 컴포넌트
const SpaceInfoCreateBox: React.FC = () => {
  const { isActiveSubmit, onSubmitCreateSpace, onChangeSpaceName } = useSpaceCreateForm();
  const { imageUrl, onChangeImage } = useImage();

  return (
    <form onSubmit={e => onSubmitCreateSpace(e, imageUrl)} encType="multipart/form-data">
      <SpaceInfo>
        <SpaceInfo.header>
          <Button type="submit" css={styles.button({ isActive: isActiveSubmit })}>
            생성하기
          </Button>
        </SpaceInfo.header>
        <SpaceInfo.ImageBox>
          <ImageBox>
            <ImageBox.changeBox imageUrl={imageUrl} onChangeImage={onChangeImage} />
          </ImageBox>
        </SpaceInfo.ImageBox>
        {/* 유연하게 여기저기에 서브 컴포넌트 or Element를 추가해서 
        SpaceInfo컴포넌트를 수정 하지 않고 구현할 수 있습니다. */}
        <SpaceInfo.InputBox>
          <input
            css={styles.input}
            name="nameInput"
            placeholder="이름을 입력하세요."
            type="text"
            maxLength={10}
            onChange={onChangeSpaceName}
            required
          />
        </SpaceInfo.InputBox>
      </SpaceInfo>
    </form>
  );
};

// 공간 정보 생성 페이지
const SpaceCreate: React.FC = () => {
  return (
    <div css={/*SpaceCreate 스타일*/}>
      {/* 공간 정보 생성 컴포넌트 */}
      <SpaceInfoCreateBox />
    </div>
  );
};