import type { Chain } from "@/entities/chain/schema";

import { RenameChainButton } from "@/features/rename-chain";
import { DeleteChainButton } from "@/features/delete-chain";

import { Typography } from "@mui/material";
import Breadcrumbs from "@mui/material/Breadcrumbs";

interface ChainEditorProps {
  chain: Chain;
}

export default function ChainEditor({ chain }: ChainEditorProps) {
  if (!chain.actions || chain.actions.length === 0)
    return (
      <>
        <Breadcrumbs sx={{ fontSize: "24px" }}>
          <Typography
            variant="h5"
            sx={{ color: "#4C4E64DE", opacity: "60%" }}
            className="select-none"
          >
            {chain.name}
          </Typography>
          <Typography
            variant="h5"
            sx={{ color: "#4C4E64DE", opacity: "87%" }}
            className="select-none"
          >
            Новый пост
          </Typography>
        </Breadcrumbs>
      </>
    );

  return (
    <div key={chain._id} className="flex items-center justify-between">
      <Typography
        variant="h5"
        sx={{ color: "#4C4E64DE", opacity: "87%" }}
        className="select-none"
      >
        {chain.name}
      </Typography>

      <div className="flex items-center gap-x-5">
        <RenameChainButton chain={chain} />
        <DeleteChainButton chain={chain} />
      </div>
    </div>
  );
}