import { ClassNameWrapper } from '../hocs/ClassNameWrapper';
import { FullScreenIcon } from './icons/FullScreenIcon';

export function Showreel() {
  return (
    <div className="lg:aspect-[1552/616] sm:aspect-[720/440] aspect-[328/204] [background:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.2)),center/cover_url(/images/motivation/Showreel.png)_no-repeat] flex justify-center items-center">
      <button className="sm:p-[22px] p-3 aspect-square rounded-full border bg-[#14161F33]">
        <ClassNameWrapper
          className="max-sm:w-5 max-sm:h-5"
          element={<FullScreenIcon />}
        />
      </button>
    </div>
  );
}
