import React from 'react';
import { useRouter } from 'next/router';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { PColor } from '../../../assets/colors';

interface SearchProps {
  Text?: string;
  children?: React.ReactNode;
}

export const LocationName: React.FC<SearchProps> = ({ Text = '', children }) => {
  const location = useRouter();
  const name = location?.pathname;
  const position = name?.indexOf('/');
  return <Search Text={Text || name?.substring(position + 1 || name?.length)}  children={children} />;
};

const Search: React.FC<SearchProps> = ({ children, Text }) => {
  return (
    <ContainerSearch>
      <Link> Buscado por</Link>
      <span style={{ fontFamily: 'PFont-Regular', fontSize: '1.5625rem', color: PColor }}>
        &nbsp;
        {Text}
      </span>
      <div>{children}</div>
    </ContainerSearch>
  );
};

Search.propTypes = {
  Text: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired
};

const ContainerSearch = styled.div`
  text-align: start;
  margin-bottom: 30px;
  width: 100%;
  margin: 40px 0;
  border-bottom: 0.0625em solid #e6e6e6;
  padding-bottom: 10px;
  @media only screen and (max-width: 960px) {
    display: none;
  }
`;

const Link = styled.span`
  font-size: 1.5625rem;
  color: black;
  font-family: PFont-Regular;
`;