Tooltip

import { IconButton } from '@orbex/sonar-components/icon-button'
import { Tooltip, TooltipProvider } from '@orbex/sonar-components/tooltip'
import type { ComponentProps } from 'react'
import downloadSymbol from '@material-symbols/svg-400/rounded/download.svg?raw'
import filterSymbol from '@material-symbols/svg-400/rounded/filter_list.svg?raw'
import printSymbol from '@material-symbols/svg-400/rounded/print.svg?raw'
import refreshSymbol from '@material-symbols/svg-400/rounded/refresh.svg?raw'

/* Material Symbols Rounded, weight 400, as icon components (Foundations › Icons) */
const symbol = (svg: string) => {
  const path = svg.match(/ d="([^"]+)"/)?.[1]
  return (props: ComponentProps<'svg'>) => (
    <svg viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" {...props}>
      <path d={path} />
    </svg>
  )
}

const DownloadIcon = symbol(downloadSymbol)
const FilterIcon = symbol(filterSymbol)
const PrintIcon = symbol(printSymbol)
const RefreshIcon = symbol(refreshSymbol)

/* Inside one provider, once a tooltip is open the next one appears at once */
export default function Toolbar() {
  return (
    <TooltipProvider>
      <div role="toolbar" aria-label="Orders" style={{ display: 'flex', gap: 4 }}>
        <Tooltip content="Filter">
          <IconButton label="Filter" icon={<FilterIcon />} />
        </Tooltip>
        <Tooltip content="Refresh">
          <IconButton label="Refresh" icon={<RefreshIcon />} />
        </Tooltip>
        <Tooltip content="Export as CSV">
          <IconButton label="Export as CSV" icon={<DownloadIcon />} />
        </Tooltip>
        <Tooltip content="Print">
          <IconButton label="Print" icon={<PrintIcon />} />
        </Tooltip>
      </div>
    </TooltipProvider>
  )
}