# ActionImage

## Description

Interactive image component with action triggers that allows users to perform actions when interacting with images. This component combines visual display with user interaction capabilities.

## Aliases

- Action Image
- Interactive Image
- Clickable Image
- Image Button

## Props Breakdown

**Extends:** `ImgHTMLAttributes<HTMLImageElement>` (via ImageProps)

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `src` | `string` | - | Yes | Source URL of the image |
| `alt` | `string` | - | Yes | Alternative text for accessibility |
| `onClick` | `(event: MouseEvent) => void` | - | No | Click handler for the image action |
| `disabled` | `boolean` | `false` | No | Whether the image action is disabled |
| `loading` | `boolean` | `false` | No | Shows loading state |
| `className` | `string` | - | No | Additional CSS class names |
| `width` | `number \| string` | - | No | Width of the image |
| `height` | `number \| string` | - | No | Height of the image |
| `objectFit` | `'cover' \| 'contain' \| 'fill'` | `'cover'` | No | How the image should fit within its container |

## Examples

### Basic Usage
```tsx
import { ActionImage } from '@delightui/components';

function BasicExample() {
  return (
    <ActionImage
      src="/images/product.jpg"
      alt="Product image"
      onClick={() => console.log('Image clicked')}
    />
  );
}
```

### Disabled State
```tsx
function DisabledExample() {
  return (
    <ActionImage
      src="/images/product.jpg"
      alt="Product image"
      disabled={true}
      onClick={() => console.log('This won\'t fire')}
    />
  );
}
```

### Loading State
```tsx
function LoadingExample() {
  return (
    <ActionImage
      src="/images/product.jpg"
      alt="Product image"
      loading={true}
      onClick={() => console.log('Image clicked')}
    />
  );
}
```

### Custom Dimensions
```tsx
function CustomSizeExample() {
  return (
    <ActionImage
      src="/images/banner.jpg"
      alt="Banner image"
      width={400}
      height={200}
      objectFit="cover"
      onClick={() => console.log('Banner clicked')}
    />
  );
}
```

### Gallery Action
```tsx
function GalleryExample() {
  const handleImageClick = (imageId: string) => {
    console.log(`Opening image ${imageId} in lightbox`);
  };

  return (
    <div className="gallery-grid">
      <ActionImage
        src="/images/gallery-1.jpg"
        alt="Gallery image 1"
        width={300}
        height={200}
        className="gallery-item"
        onClick={() => handleImageClick('1')}
      />
      <ActionImage
        src="/images/gallery-2.jpg"
        alt="Gallery image 2"
        width={300}
        height={200}
        className="gallery-item"
        onClick={() => handleImageClick('2')}
      />
    </div>
  );
}
```