import { Avatar } from '@discord-clone/ui';
import { Microphone, MicrophoneSlash } from '@phosphor-icons/react';
import styles from './VoiceParticipantTile.module.css';

export interface VoiceParticipantTileData {
	userId: string;
	username: string;
	avatarUrl?: string;
	isMuted?: boolean;
	isSpeaking?: boolean;
	isScreenSharing?: boolean;
}

interface VoiceParticipantTileProps {
	participant: VoiceParticipantTileData;
}

export function VoiceParticipantTile({ participant }: VoiceParticipantTileProps) {
	const { username, avatarUrl, isMuted, isSpeaking } = participant;

	return (
		<div
			className={styles.lkParticipantTile}
			data-source="avatar"
			data-speaking={isSpeaking ? 'true' : 'false'}
			data-muted={isMuted ? 'true' : 'false'}
		>
			<div className={styles.lkParticipantPlaceholder}>
				<Avatar src={avatarUrl} fallback={username} size={96} />
			</div>

			<div className={styles.lkParticipantMetadata}>
				<div className={styles.lkParticipantMetadataItem}>
					<span className={styles.name}>{username}</span>
				</div>
				<div className={styles.lkParticipantMetadataItem}>
					{isMuted ? (
						<MicrophoneSlash size={16} weight="fill" className={styles.mutedIcon} />
					) : (
						<Microphone size={16} weight="fill" />
					)}
				</div>
			</div>
		</div>
	);
}
