import React from 'react';
import { chunk } from 'lodash';
import styles from './dial-buttons.module.css';

interface DialButton
{
	title: string;
	subTitle:string;
}

const buttons: DialButton[] = [
	{title: "1", subTitle: " "},
	{title: "2", subTitle: "abc"},
	{title: "3", subTitle: "efg"},
	{title: "4", subTitle: "hij"},
	{title: "5", subTitle: "klm"},
	{title: "6", subTitle: "nop"},
	{title: "7", subTitle: "qrs"},
	{title: "8", subTitle: "tuv"},
	{title: "9", subTitle: "wxyz"},
	{title: "*", subTitle: " "},
	{title: "0", subTitle: "+"},
	{title: "#", subTitle: " "},
];

export default function DialButtons({action}: {action: (digit: string) => void}) {
	return (
		<div>
			{ chunk(buttons, 3).map((buttonRow, rowIndex) =>
				<div key={rowIndex}>
					{ buttonRow.map(({title, subTitle}, index) => 
					<button key={title} className={styles["dial-button"]} onClick = {() => action(title)}>
						<div className={styles["title"]}>{ title }</div>
						<div className={styles["sub-title"]}>{ subTitle }</div>
					</button>) }
				</div>
				)
			}
		</div>
	);
}