"use client";

import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import {
  alpha,
  useTheme,
} from "@mui/material/styles";

import type { Agency } from "./add-issue-dialog-types";

type AgencyDisplayProps = {
  agency?: Agency;
};

export function AgencyDisplay({
  agency,
}: AgencyDisplayProps) {
  const theme = useTheme();

  if (!agency) {
    return (
      <Typography
        sx={{
          fontSize: 12,
          color: theme.palette.text.secondary,
        }}
      >
        Select Agency
      </Typography>
    );
  }

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        gap: 1,
        minWidth: 0,
      }}
    >
      <Avatar
        src={agency.logo}
        alt={agency.name}
        slotProps={{
          img: {
            loading: "lazy",
          },
        }}
        sx={{
          width: 18,
          height: 18,
          flexShrink: 0,
          bgcolor:
            theme.palette.mode === "dark"
              ? alpha(
                  theme.palette.common.white,
                  0.08,
                )
              : "#F3F4F6",
          border: `1px solid ${
            theme.palette.mode === "dark"
              ? alpha(
                  theme.palette.common.white,
                  0.1,
                )
              : alpha(
                  theme.palette.common.black,
                  0.06,
                )
          }`,
          "& img": {
            objectFit: "contain",
          },
        }}
      >
        {agency.name
          .charAt(0)
          .toUpperCase()}
      </Avatar>

      <Typography
        noWrap
        title={agency.name}
        sx={{
          minWidth: 0,
          fontSize: 12,
          fontWeight: 600,
          color: theme.palette.text.primary,
          lineHeight: 1.1,
        }}
      >
        {agency.name}
      </Typography>
    </Box>
  );
}