import type { Service } from '../../api/types'
import { SERVICES } from './services'

const sizes = {
  sm: 'size-8 rounded-md [&_svg]:size-4',
  md: 'size-10 rounded-md [&_svg]:size-5',
  lg: 'size-12 rounded-lg [&_svg]:size-6',
}

/** Coloured tile with a white icon — the canonical marker for a Stackship resource. */
export function ServiceIcon({
  service,
  size = 'md',
}: {
  service: Service
  size?: keyof typeof sizes
}) {
  const { icon: Icon, bg, label } = SERVICES[service]
  return (
    <span
      className={`grid shrink-0 place-items-center text-white shadow-sm ${bg} ${sizes[size]}`}
      title={label}
    >
      <Icon strokeWidth={1.75} />
    </span>
  )
}