import classNames from 'classnames';
import React from 'react'

type Props = {
  children: React.ReactNode,
  active: boolean,
}

export default function AvailabilityIndicator({ active, children }: Props) {
  const statusClass = active ? "bg-green-400" : "bg-gray-500";
  return (
    <div className="flex space-x-1 items-center">
      <div className="flex-none">
        <div className={classNames("border border-white w-3 h-3 rounded-full", statusClass)}></div>
      </div>
      <div className="flex-grow text-xs">
        {children}
      </div>
    </div>
  )
}