import React from 'react'

import '../tailwind.css'

export interface InlineErrorProps {
  /* Message explaining how to resolve the error */
  message?: string
}

const exclamationMarkup = (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    className="mr-1 h-5 w-5"
    viewBox="0 0 20 20"
    fill="currentColor"
  >
    <path
      fillRule="evenodd"
      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
      clipRule="evenodd"
    />
  </svg>
)

export const InlineError = ({ message }: InlineErrorProps) => {
  return (
    <p className="mt-1 flex text-sm text-negative-text">
      {exclamationMarkup} {message}
    </p>
  )
}
