import { Upload as AntdUpload } from "antd";
import React from "react";
import { GlobalStyledUpload, Wrapper } from "./Upload.styled";
import { TUploadProps } from "./types";
import Link from "../link/Link";
import { UploadIcon } from "./assets/UploadIcon";
import { Text } from '../../components/typography/Typography';

export const Upload: React.FC<TUploadProps> = ({
  fieldName,
  description,
  ...rest
}) => {
  return (
    <>
      <GlobalStyledUpload />
      <Wrapper>
        {fieldName && <Text type="P">{fieldName}</Text>}
        <AntdUpload {...rest}>
          <Wrapper>
            <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
              <UploadIcon />
              <Link pseudo>Выбрать файл</Link>
            </div>
            {description && (
              <div style={{ maxWidth: "370px" }}>
                <Text type="SPAN">{description}</Text>
              </div>
            )}
          </Wrapper>
        </AntdUpload>
      </Wrapper>
    </>
  );
};