import type { FC } from "react";

import type { IconProps } from "../types";

import { bindIconAnimation } from "../bind-icon-animation";
import classes from "../navigation.module.css";

const PortfolioIcon: FC<IconProps> = (props) => {
	const { size = "24", ...svgProps } = props;

	return (
		<svg
			aria-hidden="true"
			fill="none"
			focusable="false"
			height={size}
			ref={bindIconAnimation}
			stroke="currentColor"
			strokeLinecap="round"
			strokeLinejoin="round"
			strokeWidth="1.5"
			viewBox="0 0 24 24"
			width={size}
			{...svgProps}
		>
			<path d="M3 10v9h18v-9" />

			<path className={classes.portfolioHandle} d="M8 6V4h8v2" />

			<path
				className={classes.portfolioLid}
				d="M3 10V8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2H3Zm6 0v3h6v-3"
			/>

			<path
				className={classes.portfolioRuble}
				d="M10 18v-7h3a2 2 0 0 1 0 4H9m0 1.5h4"
			/>
		</svg>
	);
};

export { PortfolioIcon };