/**
 * MobilePinActionsSheet — bottom sheet opened by long-pressing a
 * pinned message in the mobile Pins tab. Mirrors the pattern used
 * by MobileMessageActionsSheet: a rounded card of danger-styled
 * action rows, with inset dividers between them.
 *
 * Currently only has one action ("Unpin Message") since that's the
 * only contextual action the pinned list needs — jumping to the
 * message is already the tap behaviour on the card itself, and
 * there's no "reply to pin" or "react to pin" concept. Structured
 * as a card stack so future actions can drop in without reshuffling.
 */
import { PushPinSlash } from '@phosphor-icons/react';
import { BottomSheet } from '@brycord/ui';
import styles from './MobilePinActionsSheet.module.css';

interface MobilePinActionsSheetProps {
	isOpen: boolean;
	onClose: () => void;
	/** True when the local user has permission to unpin — the sheet
	 *  simply doesn't render the Unpin action otherwise. */
	canUnpin: boolean;
	onUnpin: () => void;
}

export function MobilePinActionsSheet({
	isOpen,
	onClose,
	canUnpin,
	onUnpin,
}: MobilePinActionsSheetProps) {
	// Wrap each action so tapping it always closes the sheet. Mirrors
	// the pattern in MobileMessageActionsSheet so behaviour is
	// consistent across both bottom sheets.
	const wrap = (fn: () => void) => () => {
		fn();
		onClose();
	};

	return (
		<BottomSheet
			isOpen={isOpen}
			onClose={onClose}
			disableDefaultHeader
			showHandle
			initialHeightSvh={25}
			expandable
		>
			<div className={styles.body}>
				{canUnpin && (
					<div className={styles.actionList}>
						<button
							type="button"
							className={`${styles.actionItem} ${styles.actionItemDanger}`}
							onClick={wrap(onUnpin)}
						>
							<PushPinSlash size={20} weight="fill" />
							<span>Unpin Message</span>
						</button>
					</div>
				)}
			</div>
		</BottomSheet>
	);
}