import type { ReactNode } from 'react';

export interface RowListItem {
	id: string;
	thumb?: ReactNode;
	title: ReactNode;
	subtitle: ReactNode;
	trail: ReactNode;
	href?: string;
	ariaLabel?: string;
	onClick?: () => void;
}

export const RowList = ( { rows }: { rows: RowListItem[] } ) => (
	<div className="list-card">
		{ rows.map( ( row ) => {
			const content = (
				<>
					<div className="lr-thumb">{ row.thumb || '🗂️' }</div>
					<div className="lr-main">
						<div className="nm">{ row.title }</div>
						<div className="sub">{ row.subtitle }</div>
					</div>
					<div className="lr-trail">{ row.trail }</div>
				</>
			);

			if ( row.onClick ) {
				return (
					<button
						type="button"
						className="list-row"
						key={ row.id }
						aria-label={ row.ariaLabel }
						onClick={ row.onClick }
					>
						{ content }
					</button>
				);
			}

			if ( row.href ) {
				return (
					<a
						className="list-row"
						key={ row.id }
						href={ row.href }
						aria-label={ row.ariaLabel }
					>
						{ content }
					</a>
				);
			}

			return (
				<div className="list-row" key={ row.id }>
					{ content }
				</div>
			);
		} ) }
	</div>
);
