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 "@/features/pswg/working-group-issues/components/create-issuses/add-working-group-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}
        sx={{
          width: 18,
          height: 18,
          bgcolor:
            theme.palette.mode === "dark"
              ? alpha(theme.palette.common.white, 0.08)
              : "#F3F4F6",
        }}
      />

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