import clsx from 'clsx';
import React from 'react';
import { BaseFormElement } from '../Form.models';
import { FormElementContainer } from '../FormElementContainer';
import classes from './LinkField.scss';

export interface LinkFieldProps extends BaseFormElement {
  /** Value to be displayed */
  value?: string | number;
  /** URL to navigate to */
  url?: string;
  /** Download file name. (default: unset) */
  download?: string;
}
/**
 * This component renders a read only field containing a link into a form.
 */
export const LinkField: React.FC<LinkFieldProps> = ({
  value = '',
  url,
  download,
  className = '',
  ...rest
}) => {
  return (
    <FormElementContainer
      {...rest}
      className={clsx(classes.container, 'link-field-container', className)}
      minHeight="auto"
      dataTestFieldType="Link"
    >
      <a
        className={clsx(classes.value)}
        href={url}
        target="_blank"
        rel="noreferrer"
        download={download}
      >
        {value}
      </a>
    </FormElementContainer>
  );
};
