import Box from "@mui/material/Box";

import { dashboardAssets } from "@/components/dashboard/dashboard-assets";
import { DashboardAssetIcon } from "@/components/dashboard/dashboard-asset-icon";

type PdfDocumentIconProps = {
  size?: number;
};

export function PdfDocumentIcon({ size = 20 }: PdfDocumentIconProps) {
  const scale = size / 20;

  return (
    <Box
      sx={{
        width: size,
        height: size,
        position: "relative",
        flexShrink: 0,
      }}
    >
      <DashboardAssetIcon
        src={dashboardAssets.fileReferencePage}
        width={12 * scale}
        height={15 * scale}
        sx={{
          position: "absolute",
          left: 4 * scale,
          top: 2 * scale,
        }}
      />
      <DashboardAssetIcon
        src={dashboardAssets.fileReferenceEarmark}
        width={5.75 * scale}
        height={5.75 * scale}
        sx={{
          position: "absolute",
          left: 10 * scale,
          top: 1 * scale,
        }}
      />
      <Box
        sx={{
          position: "absolute",
          left: 0,
          top: 7 * scale,
          width: 14 * scale,
          height: 8 * scale,
          borderRadius: "2px",
          bgcolor: "#f04438",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          px: `${3 * scale}px`,
          py: `${2 * scale}px`,
        }}
      >
        <DashboardAssetIcon
          src={dashboardAssets.fileReferenceLabel}
          width={5 * scale}
          height={2 * scale}
        />
      </Box>
    </Box>
  );
}