import LevelText from "@/components/LevelText";
import { GetAvatarWwwLevelsAPI } from "@/type/wwwAPI";
import { Placeholder } from "react-bootstrap";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";
import { getDatetime } from "taehui-ts/date";

export default function WwwLevelView({
  title,
  levelText,
  level,
  date,
}: GetAvatarWwwLevelsAPI[number]) {
  return (
    <Row>
      <Col>
        <Stack gap={2} direction="horizontal">
          <LevelText level={level} levelText={levelText} />
          {title}
        </Stack>
      </Col>
      <Col xs="auto">
        <span className="fittedText">{getDatetime(date)}</span>
      </Col>
    </Row>
  );
}

export const WwwLevelViewLoading = () => {
  return (
    <Stack gap={2} direction="horizontal">
      <Placeholder xs={4} size="lg" bg="secondary" animation="wave" />
      <Placeholder xs={8} size="lg" bg="secondary" animation="wave" />
    </Stack>
  );
};