import { X } from '@phosphor-icons/react';
import styles from './ReplyBar.module.css';

interface ReplyBarProps {
	replyingTo: string; // username
	onCancel: () => void;
}

export function ReplyBar({ replyingTo, onCancel }: ReplyBarProps) {
	return (
		<div className={styles.container}>
			<span className={styles.text}>
				Replying to <strong>{replyingTo}</strong>
			</span>
			<button className={styles.cancel} onClick={onCancel}>
				<X size={16} weight="bold" />
			</button>
		</div>
	);
}
