import type { ISkeletonProps } from "./Skeleton.d"
import type { JSX } from "react"

import { FunctionComponent } from "react"

import { Skeleton as RadixSkeleton } from "@radix-ui/themes"

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

export const Skeleton: FunctionComponent<ISkeletonProps> = ({
	width,
	height,
	borderRadius,
	className,
}): JSX.Element => {
	return (
		<RadixSkeleton
			loading
			width={width as string}
			height={height as string}
			style={{ borderRadius }}
			className={className}
		/>
	)
}

export const StatsGridSkeleton: FunctionComponent = (): JSX.Element => (
	<div className={styles.statsGrid}>
		{Array.from({ length: 4 }).map((_, i) => (
			<div key={i} className={styles.statCard}>
				<Skeleton width="48px" height="32px" borderRadius="6px" />
				<Skeleton width="100px" height="14px" borderRadius="4px" />
			</div>
		))}
	</div>
)

export const ProjectCardSkeleton: FunctionComponent = (): JSX.Element => (
	<div className={styles.projectCard}>
		<Skeleton height="180px" borderRadius="0" className={styles.heroSkeleton} />
		<div className={styles.projectCardContent}>
			<Skeleton width="70%" height="16px" borderRadius="4px" />
			<Skeleton width="40%" height="12px" borderRadius="4px" />
		</div>
	</div>
)

export const RecentProjectsSkeleton: FunctionComponent = (): JSX.Element => (
	<div className={styles.recentGrid}>
		{Array.from({ length: 3 }).map((_, i) => (
			<ProjectCardSkeleton key={i} />
		))}
	</div>
)
