import { JSX } from '@redneckz/uni-jsx';
import { useRouter } from '../../external/useRouter';
import { BlockWrapper } from '../../ui-kit/BlockWrapper';
import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
import { adjustHref } from '../../utils/adjustHref';
import { Headline } from '../Headline/Headline';
import { type VideoContent } from './VideoContent';

interface VideoProps extends VideoContent, UniBlockProps {}

export const Video = JSX<VideoProps>(({ className, title, url, previewImg, ...rest }) => {
  const router = useRouter();

  return (
    <BlockWrapper className={className} {...rest}>
      <Headline title={title} headlineVersion="M" />
      {url ? (
        <video
          className="m-auto w-full object-fill"
          preload="metadata"
          poster={adjustHref(router)(previewImg?.src)}
          style={{ maxHeight: 524 }}
          controls
        >
          <source src={adjustHref(router)(url)} />
        </video>
      ) : null}
    </BlockWrapper>
  );
});