import Link from "next/link";
import type { PageContent } from "@prisma/client";
import { CreatorPhotoCircle } from "@/components/site/CreatorPhotoCircle";

const defaultBrandSkills = [
  "Nepal",
  "Travel",
  "Culture",
  "Videos",
  "Shorts",
  "Food",
  "Stories",
  "Lifestyle"
];

type CreatorIntroProps = {
  about: PageContent | null;
  brandImage?: string | null;
  brandSkills?: string[];
};

export function CreatorIntro({ about, brandImage, brandSkills = defaultBrandSkills }: CreatorIntroProps) {
  return (
    <div className="creator-intro">
      <CreatorPhotoCircle
        alt="Just Chill Nepal"
        imageUrl={brandImage}
        placeholder="Upload Just Chill Nepal photo from Admin → Creator Intro"
        skills={brandSkills}
      />

      <div className="creator-copy">
        <span className="pill">Just Chill Nepal</span>
        <h2>{about?.title ?? "About Just Chill Nepal"}</h2>
        <p className="hero-copy">{about?.subtitle ?? "A chill way to discover Nepal."}</p>
        <p className="muted">
          {about?.body ??
            "Just Chill Nepal is a Nepal-wide media platform for videos, shorts, culture, food, lifestyle, people blogs, and useful content."}
        </p>
        <div className="hero-actions">
          <Link className="btn" href="/contact">
            Get In Touch
          </Link>
          <Link className="btn btn-secondary" href="/videos">
            Watch Videos
          </Link>
        </div>
      </div>
    </div>
  );
}