как правильно реализовать много используемый компонент

ситуация такая нужно 3 варианта применения

1. transform:translate по Y оси

2. img идет после div с текстом

3. transform:translate по X оси

   import React, { useState } from 'react'
   import styles from './HideComponent.module.scss'
   import img1 from '../icons/1.svg'
   
   export const HideComponent = () => {
   const [hide, setHide] = useState(false)
   const handleClick = (e) => {
       setHide((prev) => {
           return true
       })
   }
   return (
       <div className={`${styles.root} ${hide ? styles.hide : ''}`}>
           <img className={styles.img} src={img1} alt="img1"/>
           <div className={styles.textContainer}>
               <p>dasgadsfhsdfhfgdfsgdsfsjdghkjghfk</p>
               <button onClick={handleClick}>asfsdga</button>
           </div>
       </div>
   )
   

   }

   .root{
   display: flex;
   width: 100%;
   border: 1px solid red;
   .img{
       width: 200px;
   }
   .textContainer{
       border: 1px solid grey;
       }
   }
   
   .hide{
       transform: translateY(-100px);
   }
   

я конечно магу реализовать по своему но хотелось бы узнать мнения более опытных как вы бы сделали?