import { Hall } from "@/app/[language]/hall/type";
import AvatarDrawing from "@/components/AvatarDrawing";
import AvatarPlaceText from "@/components/AvatarPlaceText";
import AvatarTitle from "@/components/AvatarTitle";
import Link from "next/link";
import { ReactNode } from "react";
import { Placeholder, PlaceholderButton } from "react-bootstrap";
import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row";
import Stack from "react-bootstrap/Stack";

export default function AvatarView({
  avatarID,
  avatarName,
  text,
  avatarPlace,
  children,
}: Hall & { avatarPlace: number; children?: ReactNode }) {
  return (
    <Row as={Link} href={`/avatar/!${avatarID}`}>
      <Col xs="auto">
        <AvatarPlaceText avatarPlace={avatarPlace} />
      </Col>
      {children && <Col xs="auto">{children}</Col>}
      <Col xs="auto">
        <AvatarDrawing avatarID={avatarID} />
      </Col>
      <Col>
        <Stack gap={2}>
          <AvatarTitle avatarID={avatarID} avatarName={avatarName} />
          {text}
        </Stack>
      </Col>
    </Row>
  );
}

export function AvatarViewLoading() {
  return (
    <Row>
      <Col xs="auto">
        <PlaceholderButton />
      </Col>
      <Col>
        <Stack gap={2}>
          <Stack gap={2} direction="horizontal">
            <Placeholder xs={4} size="lg" bg="secondary" animation="wave" />
            <Placeholder xs={8} size="lg" bg="secondary" animation="wave" />
          </Stack>
          <Placeholder xs={2} size="lg" bg="secondary" animation="wave" />
        </Stack>
      </Col>
    </Row>
  );
}