import React from 'react';
import type { MessageBlock } from '@/store/commStore';

interface ImageBlockProps {
  block: MessageBlock;
}

const ImageBlock: React.FC<ImageBlockProps> = ({ block }) => {
  const { url, alt, width } = block.block_data;

  if (!url) {
    return null;
  }

  const imageAlt: string = alt || '';
  const imageWidth: number | undefined = typeof width === 'number' ? width : undefined;

  return (
    <div className="space-y-1">
      <a href={url} target="_blank" rel="noopener noreferrer" className="block">
        <img
          src={url}
          alt={imageAlt}
          width={imageWidth}
          className="rounded-lg max-w-full shadow-sm cursor-pointer hover:shadow-md transition-shadow"
        />
      </a>
      {imageAlt && (
        <p className="text-xs text-secondary-500 italic">{imageAlt}</p>
      )}
    </div>
  );
};

export default ImageBlock;
