---
import type { Locale } from '@i18n/locales';
import { useDict } from '@i18n/t';
import type { ProjectVM } from '@lib/content';
import SectionLabel from '@components/ui/SectionLabel.astro';
import Chip from '@components/ui/Chip.astro';

interface Props {
  locale: Locale;
  project: ProjectVM;
}
const { locale, project } = Astro.props;
const d = useDict(locale);
const eyebrow =
  project.template === 'case-study' ? d.project.caseStudyEyebrow : d.project.capabilityEyebrow;
const linkLabel: Record<string, string> = {
  repo: d.project.repository,
  live: d.project.liveDemo,
  docs: 'Docs',
};
---

<header>
  <SectionLabel text={eyebrow} />
  <div class="mt-4 flex flex-wrap items-center gap-4">
    <h1 class="text-h1">{project.name}</h1>
    <Chip kind="status" status={project.status} label={d.project.status[project.status]} />
  </div>
  <p class="mt-4 max-w-[60ch] text-body-lg text-ink-muted">{project.valueProp}</p>

  <div class="mt-5 flex flex-wrap items-center gap-2">
    {project.stack.map((s) => <Chip kind="stack" label={s.name} tooltip={s.context} />)}
  </div>

  {
    project.links.length > 0 && (
      <div class="mt-5 flex flex-wrap gap-4">
        {project.links
          .filter((l) => l.public)
          .map((l) => (
            <a
              href={l.url}
              rel="noopener"
              class="inline-flex items-center gap-1 text-body text-accent hover:underline"
            >
              {linkLabel[l.type] ?? l.type} ↗
            </a>
          ))}
      </div>
    )
  }
</header>
