import { PlusIcon } from '@/icons'
import { useState } from 'preact/hooks'
import { ContactPointFormModal } from './ContactPointsTable/components/ContactPointFormModal'

export const NoContactPoints = () => {
	const [showNew, setShowNew] = useState(false)

	return (
		<>
			<div className="empty">
				<div>No contact points defined.</div>
				<div>
					<button onClick={() => setShowNew(true)}>
						<PlusIcon /> Add a new contact point
					</button>
				</div>
			</div>
			{showNew && (
				<ContactPointFormModal open onClose={() => setShowNew(false)} />
			)}
		</>
	)
}