'use client';

import { useState } from 'react';
import { Mail } from 'lucide-react';
import { useMemberContext } from '@/contexts/memberProvider';
import NoteComposeModal from './NoteComposeModal';
import type { RecipientItem } from '@/types/response/note/searchRecipient';

type Props = {
	target: {
		memberID: number;
		displayName: string;
		thumbnailUrl: string|null;
	};
	className?: string;
	label?: string;
	iconSize?: number;
};

export default function NoteButton({ target, className, label = '쪽지', iconSize = 14 }: Props)
{
	const { member } = useMemberContext();
	const [open, setOpen] = useState(false);

	// 본인 또는 미로그인 시 버튼 미표시
	if (!member || member.id === target.memberID) {
		return null;
	}

	const recipient: RecipientItem = {
		memberID: target.memberID,
		displayName: target.displayName,
		displaySubtitle: null,
		thumbnailUrl: target.thumbnailUrl
	};

	return (
		<>
			<button
				type="button"
				onClick={() => setOpen(true)}
				className={className}
				aria-label="쪽지 보내기"
				title="쪽지 보내기"
			>
				<Mail size={iconSize} /> {label}
			</button>

			<NoteComposeModal
				open={open}
				onClose={() => setOpen(false)}
				initialReceiver={recipient}
			/>
		</>
	);
}