// Assuming this is your custom Image component
// const CustomImage = (props) => {
//     return (
//       <img 
//         src={props.src} 
//         alt={props.alt || 'Custom Image'} 
//         className={props.className}  // Now it accepts className as a prop
//         width={props.width} 
//         height={props.height} 
//       />
//     );
//   };

//   export default CustomImage;


// import React from 'react';

// interface CustomImageProps {
//   src: string;         // Required prop
//   alt?: string;       // Optional prop
//   className?: string; // Optional prop for className
//   width?: number;     // Optional width
//   height?: number;    // Optional height
// }

// const CustomImage: React.FC<CustomImageProps> = (props) => {
//   return (
//     <img 
//       src={props.src} 
//       alt={props.alt || 'Custom Image'} 
//       className={props.className} 
//       width={props.width} 
//       height={props.height} 
//     />
//   );
// };

// export default CustomImage;


import React from 'react';
import Image from 'next/image';

interface CustomImageProps {
  src: string;         // Required prop
  alt?: string;       // Optional prop
  className?: string; // Optional prop for className
  width: number;      // Required width for the Image component
  height: number;     // Required height for the Image component
}

const CustomImage: React.FC<CustomImageProps> = ({ src, alt = 'Custom Image', className, width, height }) => {
  return (
    <div className={className}> {/* Wrap in a div if you want to apply className */}
      <Image 
        src={src} 
        alt={alt} 
        layout="responsive" // or "fixed", "fill", etc., depending on your use case
        width={width} 
        height={height} 
      />
    </div>
  );
};

export default CustomImage;