import { FC, useState } from "react";
import { ICityGroup } from "./helpers";
import styles from "@/src/portfolio/styling/experience.module.scss";
import { FiChevronDown, FiChevronUp } from "react-icons/fi";

interface ICityGroupProps {
	group: ICityGroup;
}

const CityGroup: FC<ICityGroupProps> = ({ group }) => {
	const [showAll, setShowAll] = useState(false);
	const displayedJobs = showAll ? group.jobs : group.visibleJobs;

	return (
		<div
			className={`${styles.cityGroup} ${group.offsetDirection === "left" ? styles.offsetLeft : styles.offsetRight}`}
			style={{
				backgroundImage: group.imageUrl ? `url(${group.imageUrl})` : undefined
			}}
		>
			<div className={styles.overlay}></div>
			<h3 className={styles.cityTitle}>{group.city}</h3>
			<div className={styles.jobsContainer}>
				{displayedJobs.map((job, index) => (
					<div key={index} className={styles.job} data-aos="fade-left">
						<span className={styles.largerText}>
							<b>{job.title}</b><br/>
							at <span className={styles.redText}>{job.company}</span><br/>
						</span>
						in <b>{job.displayLocation || `${job.city}, ${job.country}`}.</b>
						<div className={styles.industry}>{job.industry}</div>
						<hr/>
						{job.endDate ? `${job.startDate} - ${job.endDate}` : `Since ${job.startDate}`}
					</div>
				))}
				{group.hasMore && (
					<button className={styles.showMoreBtn} onClick={() => setShowAll(!showAll)}>
						{showAll ? (
							<>
								Show Less <FiChevronUp />
							</>
						) : (
							<>
								Show {group.hiddenCount} More {group.hiddenCount === 1 ? "Job" : "Jobs"} <FiChevronDown />
							</>
						)}
					</button>
				)}
			</div>
			<div className={styles.locationMarker}>
				{group.city}
			</div>
		</div>
	);
};

export default CityGroup;
