"use client";

import React, { useState } from 'react';
import classnames from 'classnames';

interface TextImage50Props {
  children: React.ReactNode;
  className?: string;
  imageUrl: string,
}

const TextImage50: React.FC<TextImage50Props> = ({ children, className, imageUrl }) => {
    
  return (
    <div className="w-full flex justify-between py-5">
        <div className="w-4/7 flex flex-col justify-start">
            {children}
        </div>
        <div className="w-2/5 flex flex-col justify-start">
            <div className="flex justify-center bg-atmosphere rounded-2xl">
                <div className={classnames(
                    "relative w-9/10"
                )}>
                    <img src={imageUrl} alt="Description" className="grayscale rounded-2xl bg-cover bg-center" />
                    <div className="after:absolute after:inset-0 after:bg-bluetang after:mix-blend-color after:rounded-2xl" />
                </div>
            </div>
        </div>
    </div>
  );
};

export default TextImage50;