<commit_before>import PropTypes from "prop-types";
import React from "react";
import styled from "styled-components";

import { routeConfig } from "@agir/front/app/routes.config";
import style from "@agir/front/genericComponents/_variables.scss";

import Button from "@agir/front/genericComponents/Button";
import Card from "@agir/front/genericComponents/Card";
import Map from "@agir/carte/common/Map";
import FeatherIcon from "@agir/front/genericComponents/FeatherIcon";

const StyledMap = styled.div``;
const StyledBody = styled.div``;
const StyledCard = styled(Card)`
  padding: 0;
  max-width: 397px;
  border: 1px solid ${style.black100};
  box-shadow: none;

  @media (max-width: ${style.collapse}px) {
    max-width: 294px;
    width: calc(100vw - 4rem);
  }

  ${StyledMap} {
    height: 216px;

    @media (max-width: ${style.collapse}px) {
      height: 159px;
    }
  }

  ${StyledBody} {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;

    @media (max-width: ${style.collapse}px) {
      padding: 1.5rem;
    }

    h4 {
      font-size: 1rem;
      line-height: 1.5;
      font-weight: 700;
      margin: 0 0 0.5rem;
    }

    p {
      margin: 0 0 1rem;
      font-size: 0.875rem;
      color: ${style.black500};
      line-height: 1.5;
      font-weight: 400;
    }
  }
`;

const GroupSuggestionCard = (props) => {
  const {
    id,
    name,
    location: { city, zip, coordinates },
    iconConfiguration,
  } = props;

  return (
    <StyledCard>
      <StyledMap>
        <Map
          center={
            coordinates && Array.isArray(coordinates.coordinates)
              ? coordinates.coordinates
              : [0, 0]
          }
          iconConfiguration={iconConfiguration}
          isStatic
        />
      </StyledMap>
      <StyledBody>
        <h4>{name}</h4>
        <p>
          {(zip || city) && <FeatherIcon name="map-pin" small inline />}
          &nbsp;
          {(zip || city) && <span>{`${zip} ${city}`.trim()}</span>}
        </p>
        <Button
          as="Link"
          to={routeConfig.groupDetails.getLink({ groupPk: id })}
          small
          color="secondary"<commit_msg>feat: add click handler to GroupSuggestionCard<commit_after>import PropTypes from "prop-types";
import React from "react";
import { useHistory } from "react-router-dom";
import styled from "styled-components";

import { routeConfig } from "@agir/front/app/routes.config";
import style from "@agir/front/genericComponents/_variables.scss";

import Button from "@agir/front/genericComponents/Button";
import Card from "@agir/front/genericComponents/Card";
import Map from "@agir/carte/common/Map";
import FeatherIcon from "@agir/front/genericComponents/FeatherIcon";

const StyledMap = styled.div``;
const StyledBody = styled.div``;
const StyledCard = styled(Card)`
  padding: 0;
  max-width: 397px;
  border: 1px solid ${style.black100};
  box-shadow: none;
  cursor: pointer;

  @media (max-width: ${style.collapse}px) {
    max-width: 294px;
    width: calc(100vw - 4rem);
  }

  ${StyledMap} {
    height: 216px;

    @media (max-width: ${style.collapse}px) {
      height: 159px;
    }
  }

  ${StyledBody} {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;

    @media (max-width: ${style.collapse}px) {
      padding: 1.5rem;
    }

    h4 {
      font-size: 1rem;
      line-height: 1.5;
      font-weight: 700;
      margin: 0 0 0.5rem;
    }

    p {
      margin: 0 0 1rem;
      font-size: 0.875rem;
      color: ${style.black500};
      line-height: 1.5;
      font-weight: 400;
    }
  }
`;

const GroupSuggestionCard = (props) => {
  const {
    id,
    name,
    location: { city, zip, coordinates },
    iconConfiguration,
  } = props;

  const history = useHistory();
  const handleClick = React.useCallback(() => {
    id &&
      routeConfig.groupDetails &&
      history.push(routeConfig.groupDetails.getLink({ groupPk: id }));
  }, [history, id]);

  return (
    <StyledCard onClick={handleClick}>
      <StyledMap>
        <Map
          center={
            coordinates && Array.isArray(coordinates.coordinates)
              ? coordinates.coordinates
              : [0, 0]
          }
          iconConfiguration={iconConfiguration}
          isStatic
        />
      </StyledMap>
      <StyledBody>
        <h4>{name}</h4>
        <p>
          {(zip || city) && <FeatherIcon name="map-pin" small inline />}
          &nbsp;
          {(zip || city) && <span>{`${zip} ${city}`.trim()}</span>}
        </p>
        <Button
          as="Link"
          to={routeConfig.groupDetails.getLink({ groupPk: id })}
          small
          color="secondary"
{'fraction_non_alphanumeric': 0.14465408805031446, 'fraction_numerical': 0.02389937106918239, 'mean_word_length': 2.3933143669985775, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 30, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1213401', 'n_tokens_mistral': 1680, 'n_tokens_neox': 1560, 'n_words': 344}