"use client";

import Link from "next/link";
import { EXPERIENCE_PORTAL } from "@/modules/experience/constants/portals";
import { Button, Card, CardContent } from "@/components/ds";

export const ExperienceHub = function ExperienceHubPage() {
  return (
    <div className="mx-auto flex min-h-[70vh] max-w-lg flex-col items-center justify-center gap-6 p-6 text-center">
      <div className="text-5xl">🌐</div>
      <div>
        <h1 className="text-2xl font-bold text-secondary">{EXPERIENCE_PORTAL.label}</h1>
        <p className="mt-2 text-sm text-[var(--muted)]">{EXPERIENCE_PORTAL.description}</p>
      </div>
      <Card className="w-full">
        <CardContent className="space-y-3 p-6">
          <p className="font-medium">{EXPERIENCE_PORTAL.label}</p>
          <p className="text-sm text-[var(--muted)]">{EXPERIENCE_PORTAL.description}</p>
          <Link href={EXPERIENCE_PORTAL.basePath}>
            <Button className="w-full">ورود به استودیو</Button>
          </Link>
        </CardContent>
      </Card>
    </div>
  );
};

export default ExperienceHub;