import type { Locale } from "@/i18n/routes";
import type { Profile } from "@/lib/models";
import { getDict } from "@/i18n/dictionaries";

export function BioSection({ profile, locale }: { profile: Profile; locale: Locale }) {
  const dict = getDict(locale);
  // Bio ist als \n\n-getrennter Text in der DB gespeichert.
  const paragraphs = profile.bio.split(/\n\n+/).filter((p) => p.trim().length > 0);
  return (
    <section aria-labelledby="bio-heading" className="ascii-box">
      <div className="section-heading">
        <span className="section-heading__label">~/bio</span>
        <h2 id="bio-heading" className="section-heading__title">{profile.handle}</h2>
      </div>
      <p className="mb-4 font-mono text-xs uppercase tracking-wider text-muted">
        {profile.role} · {profile.location}
      </p>
      <div className="space-y-4 text-[var(--fg)]">
        {paragraphs.map((p, i) => (
          <p key={i}>{p}</p>
        ))}
      </div>
      {profile.facts.length > 0 ? (
        <>
          <h3 className="mt-6 font-mono text-xs uppercase tracking-wider text-muted">
            {dict.about.factsHeading}
          </h3>
          <ul className="mt-2 space-y-1 font-mono text-sm text-[var(--fg)]">
            {profile.facts.map((f, i) => (
              <li key={i}>
                <span className="text-accent">▸</span> {f}
              </li>
            ))}
          </ul>
        </>
      ) : null}
    </section>
  );
}
