import React from 'react';
import classNames from 'classnames';
import ServiceComponent from './containers/ServiceComponent';
import { Service } from 'services/domain/serviceEntity';

type Props = {
  service: Service;
  disabled?: boolean | undefined;
};

/**
 * Service link component
 * @param {Service} service Service object
 * @return {JSX.Element}
 */
export default function ServiceLink({service, disabled = false}: Props) {
  return (
    <a
      href={service.href}
      className={classNames([
        'box-border flex',
        'transition-colors rounded-lg px-3 py-2',
        'my-1 hover:bg-gray-400/10',
        {'opacity-20 pointer-events-none': disabled},
      ])}
    >
      <ServiceComponent variant={service.variant} clipText={service.shortName}>
        <div className="text-lg font-bold leading-tight">{service.name}</div>
        {disabled ? (
          <span className="text-xs text-right text-gray">soon</span>
        ) : (
          <span className="text-xs text-gray-500">{service.href}</span>
        )}
      </ServiceComponent>
    </a>
  );
}