import Button from '../components/Button/Button';

function HomePage({
  dspCount,
  connectedCount,
  onAddDSP,
}: {
  dspCount: number;
  connectedCount: number;
  onAddDSP: () => void;
}) {
  return (
    <div className="card panel">
      <dl className="specs">
        <div className="spec">
          <dt>Connected</dt>
          <dd>
            {connectedCount} DSP{connectedCount !== 1 ? 's' : ''}
          </dd>
        </div>

        <div className="spec">
          <dt>Devices</dt>
          <dd>
            {dspCount} DSP{dspCount !== 1 ? 's' : ''} configured
          </dd>
        </div>
      </dl>

      <div className="panel-actions">
        <Button variant="primary" onClick={onAddDSP}>
          Add a DSP
        </Button>
      </div>
    </div>
  );
}

export default HomePage;