import { Mail } from 'lucide-react';
import { Skeleton } from '../ui/skeleton';

export function ProfileError({ reason }: { reason: string }) {
  return (
    <div className="flex flex-col justify-center w-full lg:w-auto h-full lg:h-auto lg:flex-row lg:gap-8">
      <div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max">
        <div className="flex flex-col w-full gap-3">
          <div className="flex flex-col w-full gap-3">
            <div className="flex flex-row gap-3 w-full lg:flex-col">
              <Skeleton className="size-16 rounded-full border-2 border-muted lg:size-64" />
              <div className="flex flex-1 flex-col justify-center lg:mt-3 gap-2">
                <Skeleton className="w-32 h-8" />
                <Skeleton className="w-20 h-6" />
              </div>
            </div>
            <div className="flex flex-row gap-2 items-center text-sm px-1 lg:px-0">
              <Mail className="h-4 w-4 stroke-muted-foreground" />
              <Skeleton className="w-32 h-4" />
            </div>
          </div>
          <Skeleton className="w-64 h-[40px]" />
        </div>
      </div>
      <Skeleton className="relative rounded-md border border-muted w-full flex-1 lg:flex-auto min-h-72 lg:h-full mt-4 lg:mt-0 prose dark:prose-invert max-w-[1012px] self-center flex items-center justify-center">
        {reason}
      </Skeleton>
    </div>
  );
}