import React from 'react';
import { DistortionArea } from '../../types/area';

export interface AreaListProps {
	areas: DistortionArea[];
	selectedAreaId: string | null;
	onSelectArea: (areaId: string) => void;
	onRemoveArea: (areaId: string) => void;
	onAddArea: () => void;
}

export const AreaList: React.FC<AreaListProps> = ({
	areas,
	selectedAreaId,
	onSelectArea,
	onRemoveArea,
	onAddArea,
}) => {
	return (
		<div className="area-list">
			<div className="area-list-header">
				<h3>왜곡 영역</h3>
				<button
					onClick={onAddArea}
					disabled={areas.length >= 8}
					className="btn-add"
					title={areas.length >= 8 ? '최대 8개 영역까지 지원' : '새 영역 추가'}
				>
					+ 추가
				</button>
			</div>
			<div className="area-list-items">
				{areas.length === 0 ? (
					<div className="area-list-empty">영역이 없습니다. + 추가 버튼을 눌러주세요.</div>
				) : (
					areas.map((area, index) => (
						<div
							key={area.id}
							className={`area-item ${selectedAreaId === area.id ? 'selected' : ''}`}
							onClick={() => onSelectArea(area.id)}
						>
							<div className="area-item-info">
								<span className="area-item-name">영역 {index + 1}</span>
								<span className="area-item-strength">강도: {(area.distortionStrength * 100).toFixed(0)}%</span>
							</div>
							<button
								onClick={(e) => {
									e.stopPropagation();
									onRemoveArea(area.id);
								}}
								className="btn-remove"
								title="영역 삭제"
							>
								×
							</button>
						</div>
					))
				)}
			</div>
		</div>
	);
};