import type {ComponentProps, FunctionComponent} from 'react'
import {Button} from '@/components/ui/button'
import type {LucideIcon} from 'lucide-react'

interface LinedCircleButtonProps extends ComponentProps<'button'> {
  Icon: LucideIcon
}

const LinedCircleIconButton: FunctionComponent<LinedCircleButtonProps> = ({Icon, ...buttonProps}) => {
  return (
    <div className="flex items-center">
      <div className="border-b-2 flex-grow" />
      <Button variant="ghost" className="p-0 border-2 rounded-full w-10 h-10" {...buttonProps}>
        <Icon size={30} className="text-border m-0" />
      </Button>
      <div className="border-b-2 flex-grow" />
    </div>
  )
}

export default LinedCircleIconButton
