import { Card } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { selectTechnician } from "../../redux/tech/tech.selectors";

const mapStateToProps = createStructuredSelector({
  technician: selectTechnician
});

const mapDispatchToProps = () => ({});

export default connect(mapStateToProps, mapDispatchToProps)(JobDetailCardTemplate);

export function JobDetailCardTemplate({ loading, title, extraLink, technician, ...otherProps }) {
  const { t } = useTranslation();

  let extra;
  if (extraLink && !technician)
    extra = {
      extra: <Link to={extraLink}>{t("jobs.labels.cards.more")}</Link>
    };
  return (
    <Card size="small" className="job-card" title={title} loading={loading} style={{ height: "100%" }} {...extra}>
      {otherProps.children}
    </Card>
  );
}
