Update MediaPicker component to have a look and UX similar to WP featured image

[juliobranha]

Description

I would like to see the MediaPicker component using the latest core components and buttons, so it has a look and UX similar to WordPress featured image.

Use Case

When a user picks an image, they can have a better UX and look

[juliobranha]

Something similar to this could work

interface MediaFieldProps {
  mediaId: number | null;
  mediaUrl: string;
  isResolving: boolean;
  onSelect: (media: Media) => void;
  onRemove: () => void;
  title: string;
  allowedTypes: string[];
  setButtonText: string;
  altText: string;
}

// Reusable Media Field Component
function MediaField({
  mediaId,
  mediaUrl,
  isResolving,
  onSelect,
  onRemove,
  title,
  allowedTypes,
  setButtonText,
  altText,
}: MediaFieldProps) {
  return (
    // @ts-ignore - WordPress React type conflict
    <MediaUploadCheck>
      <MediaUpload
        title={title}
        onSelect={onSelect}
        allowedTypes={allowedTypes}
        value={mediaId ?? undefined}
        render={({ open }) => (
          <div className="editor-post-featured-image">
            {!mediaId && !isResolving ? (
              <Button
                onClick={open}
                className="editor-post-featured-image__toggle"
                variant="secondary"
              >
                {setButtonText}
              </Button>
            ) : null}

            {/* @ts-ignore - Spinner type issue */}
            {isResolving ? <Spinner /> : null}

            {mediaId && mediaUrl && !isResolving ? (
              <div className="editor-post-featured-image__container">
                <ResponsiveWrapper>
                  {allowedTypes.includes('image') ? (
                    <img src={mediaUrl} alt={altText} />
                  ) : (
                    <video src={mediaUrl} style={{ width: '100%' }}>
                      <track kind="captions" />
                    </video>
                  )}
                </ResponsiveWrapper>

                <div
                  className="components-flex editor-post-featured-image__actions"
                  style={{
                    display: 'flex',
                    justifyContent: 'center',
                    width: '100%',
                    gap: '8px',
                  }}
                >
                  <Button
                    onClick={open}
                    className="components-button editor-post-featured-image__action"
                  >
                    {__('Replace', 'alley-scripts')}
                  </Button>

                  <Button
                    onClick={onRemove}
                    className="components-button editor-post-featured-image__action"
                  >
                    {__('Remove', 'alley-scripts')}
                  </Button>
                </div>
              </div>
            ) : null}
          </div>
        )}
      />
    </MediaUploadCheck>
  );
}