import ContentCard from "@/components/ContentCard";
import { useGlobal } from "@/context/global";
import { AspectRatio } from "@radix-ui/react-aspect-ratio";
import { Fragment } from "react";

export default function Tutorials() {
  const { dict } = useGlobal();

  return (
    <ContentCard className="grow space-y-2">
      <p>{dict.pages.dashboard.guides.title}</p>
      <div className="flex flex-wrap gap-2">
        {Array.from({ length: 1 }).map((e, i) => (
          <Fragment key={i}>
            <div className="space-y-1">
              <div className="w-40 rounded bg-gray-100 shadow">
                <AspectRatio ratio={16 / 9}>
                  <div></div>
                </AspectRatio>
              </div>
              <p className="w-full overflow-hidden text-ellipsis text-xs text-gray-500">
                Title...
              </p>
            </div>
          </Fragment>
        ))}
      </div>
    </ContentCard>
  );
}