export const ActivityBox = ({ data, editMode = false }: ActivityBoxType) => {
  // Component code
  return (
    <>
      <Progress>
        <Status $status={data.status}>
          {data.status === "RECRUITING" ? "모집중" : "모집완료"}
        </Status>
        <HeadCount>
          {data.currentApplicant}/{data.maxNumOfPeople}명
        </HeadCount>
        <KnotPay>{data.pay} 타임</KnotPay>
      </Progress>

      <PostInfo>
        {!editMode ? (
          <>
            <Title>{data.title}</Title>
            <Content>{data.content}</Content>
          </>
        ) : (
          // Edit mode UI
        )}
      </PostInfo>

      <MoreInfoContainer>
        <PromiseInfoList>
          <PromiseInfoItem $icon={DateSVG}>
            <span>{BackdateToItemtype(data.startDate)}</span>
          </PromiseInfoItem>
          <PromiseInfoItem $icon={LocationSVG}>
            <span>{data.location}</span>
          </PromiseInfoItem>
          <PromiseInfoItem $icon={TimeSVG}>
            <span>예상 소요 시간 {data.volunteerTime}분</span>
          </PromiseInfoItem>
        </PromiseInfoList>

        <span>조회수 {data.viewsCount}회</span>
      </MoreInfoContainer>
    </>
  );
};