import { cn } from 'helpers/cn';

type ResponsivenessProps = { className?: string };

export const Responsiveness = (props: ResponsivenessProps) => {
  const { className } = props;
  return (
    <div className="fixed bottom-2 right-2 p-2">
      <div
        className={cn(
          'flex h-8 w-8 flex-col items-center justify-center rounded-full bg-black text-xs text-white',
          className,
        )}
      >
        <span className="sm:hidden">xs</span>
        <span className="hidden sm:inline md:hidden">sm</span>
        <span className="hidden md:inline lg:hidden">md</span>
        <span className="hidden lg:inline xl:hidden">lg</span>
        <span className="hidden xl:inline">xl</span>
      </div>
    </div>
  );
};