import * as React from "react";

import { Button, ButtonType, ButtonSize, IButtonProps } from "../Button";
import { Link, ILinkProps } from "../Link";
import { ISocialsProps, Socials } from "../Socials";

export interface IAboutProps {
  links?: ILinkProps[];
  socials?: ISocialsProps;
  text?: string;
  action?: () => void;
  button?: Partial<IButtonProps>;
}

export const About = ({ action, links, socials, text, button}: IAboutProps) => (
  <div className="about">
    <div className="about__header-links">
      <div className="about__header">Aircam</div>
      
      {links && (
        <ul className="about__link-list">
          {links.map(link => (
            <Link
              key={link.href || link.text}
              className="about__link"
              {...link}
            />
          ))}
        </ul>
      )}
    </div>

    <div className="about__header-social-text-buttons">
      {socials && (
        <ul className="about__social-list">
          <Socials {...socials} />
        </ul>
      )}

      {text && (
        <p className="about__text">
          {text}
        </p>
      )}

      {button && (
        <Button
          className="about__btn"
          text="Get The App"
          type={ButtonType.Primary}
          size={ButtonSize.Large}
          {...button}
        />
      )}
    </div>
  </div>
)