import * as SheetRadix from '@radix-ui/react-dialog'
import { type ComponentProps } from 'react'

import { IoClose } from 'react-icons/io5'

import {
	type ContentStylesProps,
	closeStyles,
	contentStyles,
	headerStyles,
	overlayStyles
} from './Sheet.styles'

type SheetProps = ComponentProps<typeof SheetRadix.Root> &
	ContentStylesProps & {
		title?: string
		description?: string
		closeButton?: boolean
		className?: string
	}

function Sheet({
	title,
	description,
	closeButton,
	children,
	side,
	className,
	...props
}: SheetProps) {
	return (
		<SheetRadix.Root {...props}>
			<SheetRadix.Portal>
				<SheetRadix.Overlay className={overlayStyles} />
				<SheetRadix.Content
					className={contentStyles({ side, className })}
				>
					<div className={headerStyles}>
						<SheetRadix.Title>{title}</SheetRadix.Title>
					</div>
					{children}
					{closeButton && (
						<SheetRadix.Close className={closeStyles}>
							<IoClose />
						</SheetRadix.Close>
					)}
				</SheetRadix.Content>
			</SheetRadix.Portal>
		</SheetRadix.Root>
	)
}

export { Sheet }
