import type { IRecentProjectsProps } from "./RecentProjects.d"
import type { JSX } from "react"

import { FunctionComponent } from "react"

import { FolderOpenIcon, PlusIcon } from "lucide-react"

import { ProjectCard } from "@entities/ProjectCard"
import { Button } from "@shared/ui"

import styles from "./RecentProjects.module.scss"

export const RecentProjects: FunctionComponent<IRecentProjectsProps> = ({
	projects,
	isLoading,
	onProjectClick,
	onCreateClick,
	onViewAllClick,
}): JSX.Element => {
	const isEmpty = !isLoading && projects.length === 0

	return (
		<section className={styles.section} data-testid="RecentProjects">
			<div className={styles.header}>
				<h2 className={styles.title}>Последние проекты</h2>
				{!isEmpty && (
					<Button variant="ghost" size="sm" onClick={onViewAllClick}>
						Все проекты
					</Button>
				)}
			</div>

			{isEmpty ? (
				<div className={styles.empty}>
					<FolderOpenIcon size={40} strokeWidth={1.5} />
					<p className={styles.emptyText}>У вас пока нет проектов</p>
					<Button variant="primary" onClick={onCreateClick}>
						<PlusIcon /> Создать первый проект
					</Button>
				</div>
			) : (
				<div className={styles.grid}>
					{projects.map((project) => (
						<ProjectCard
							key={project.id}
							project={project}
							progress={project.status === "PROCESSING" ? 45 : 0}
							currentAction={project.status === "PROCESSING" ? "Обработка" : undefined}
							onClick={() => onProjectClick(project.id)}
						/>
					))}
				</div>
			)}
		</section>
	)
}
