import type { IProjectsHeaderProps, ProjectStatusEnum } from "./ProjectsHeader.d"
import type { JSX } from "react"

import { SearchIcon } from "lucide-react"
import { FunctionComponent } from "react"

import { Separator } from "@radix-ui/themes"

import { Button, TextField } from "@shared/ui"

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

export type { ProjectStatusEnum } from "./ProjectsHeader.d"

const STATUS_FILTERS: { label: string; value: ProjectStatusEnum }[] = [
	{ label: "Все", value: "" },
	{ label: "Черновики", value: "DRAFT" },
	{ label: "В обработке", value: "PROCESSING" },
	{ label: "Завершенные", value: "DONE" },
	{ label: "С ошибкой", value: "FAILED" },
]

export const ProjectsHeader: FunctionComponent<
	IProjectsHeaderProps
> = ({
	search,
	onSearchChange,
	statusFilter,
	onStatusFilterChange,
}): JSX.Element => {
	return (
		<div className={styles.root} data-testid="ProjectsHeader">
			<TextField
				id="project-search-field"
				placeholder="Поиск проектов..."
				size={"2"}
				startIcon={<SearchIcon size={16} />}
				value={search}
				onChange={(e) => onSearchChange(e.target.value)}
			/>
			<Separator orientation={"vertical"} className={styles.separator} />
			<div className={styles.filters}>
				{STATUS_FILTERS.map((filter) => (
					<Button
						key={filter.value}
						variant={statusFilter === filter.value ? "secondary" : "outline"}
						size="md"
						onClick={() => onStatusFilterChange(filter.value)}
					>
						{filter.label}
					</Button>
				))}
			</div>
		</div>
	)
}
