import { EditOutlined } from "@ant-design/icons";
import { Input, Typography } from "antd";
import { useState } from "react";

export default function MyTypography({ value, setValue, maxLength }) {
  const [editing, setEditing] = useState(false);

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        gap: 10,
        marginRight: 26,
        alignItems: "center",
      }}
    >
      {editing ? (
        <Input
          value={value}
          onChange={(e) => setValue(e.target.value)}
          maxLength={maxLength}
          showCount
        />
      ) : (
        <Typography.Title level={3} style={{ margin: 0 }}>
          {value}
        </Typography.Title>
      )}

      <EditOutlined
        style={{ fontSize: 24 }}
        onClick={() => setEditing(!editing)}
      />
    </div>
  );
}