import Hexagon from 'components/Hexagon'
import { StyleColorVariants } from 'core/_variants';
import React from 'react'

type Props = {
  variant?: StyleColorVariants | undefined;
  children: React.ReactNode;
  clipText: string;
}

export default function ServiceComponent({variant, children, clipText}: Props) {
  return (
    <div className="flex flex-row items-center">
      <div className="inline-block w-12 h-12 mr-4">
        <Hexagon variant={variant} className="w-full h-full transition-colors" fontSize={24}>
          {clipText}
        </Hexagon>
      </div>
      <div className="flex-1">
        {children}
      </div>
    </div>
  )
}