/**
 * @description 请添加Cell组件的描述和注释!!!
 *
 * @date 创建时间 2022-10-29 15:10
 * @author 开发人员
 */

import React, { ReactNode, useMemo } from "react";
import clsx from "clsx";

interface Props {
  label: ReactNode | string;
  value?: string;
  valueClassName?: string;
  extra?: React.ReactNode;
}

const Cell: React.FC<Props> = props => {
  const { extra } = props;

  const value = useMemo(() => {
    return props.value ?? "--";
  }, [props.value]);
  return (
    <div className="flex flex-col mr-[16px] text-[12px] text-derive-11 nav-cell">
      <div className="mb-[1px]">{props.label}</div>
      <div className={clsx("text-gray-16 font-bold", props.valueClassName)}>
        {value}
        {extra && <span className="ml-[4px]">{extra}</span>}
      </div>
    </div>
  );
};

export default Cell;