import styles from './ProjectDetails.module.scss';
import Link from '../Link';
import {
  TitleDescriptionFormat as TitleDescriptionFormatI,
  Link as LinkI,
} from '../../models/common';

export type Props = {
  link: LinkI;
  details: TitleDescriptionFormatI[];
};

const ProjectDetails = (props: Props): JSX.Element => {
  const { link, details } = props;
  return (
    <div className={styles.projectDetails}>
      <div className={styles.container}>
        <div className={styles.contentKeywords}>
          <div>
            {link?.url && (
              <Link
                href={link?.url}
                type={link.style?.type}
                iconSize={link.style?.iconSize}
                textSize={link.style?.textSize}
                isIconFirst={link.style?.isIconFirst}
                isExternal={link.isExternal}
              >
                {link?.label || ''}
              </Link>
            )}
          </div>
          {details?.map((detail, id) => (
            <div key={id}>
              <div className="h7">{detail.title}</div>
              <div className="text_5">{detail.text}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ProjectDetails;