portfolio/src/components/svelte/EducationItem.svelte

<script lang="ts" module>
  export interface Award {
    name: string
    description?: string
  }

  export interface EducationEntry {
    school: string
    degree: string
    minor?: string
    gpa?: string
    location?: string
    startYear: number
    startMonth?: string
    endYear?: number
    endMonth?: string
    expected?: boolean
    courses?: string[]
    awards?: Award[]
  }
</script>

<script lang="ts">
  import Badge from './Badge.svelte'
  import IconHash from '~icons/lucide/hash'
  import IconCalendar from '~icons/lucide/calendar'
  import IconMapPin from '~icons/lucide/map-pin'
  import IconAward from '~icons/lucide/award'

  interface Props {
    entry: EducationEntry
    isLast?: boolean
  }

  let { entry, isLast = false }: Props = $props()

  const dateDisplay = $derived(() => {
    const start = entry.startMonth ? `${entry.startMonth} ${entry.startYear}` : `${entry.startYear}`

    if (entry.endYear) {
      const end = entry.endMonth ? `${entry.endMonth} ${entry.endYear}` : `${entry.endYear}`
      return `${start} - ${end}`
    }

    // Check if start date is in the future
    const now = new Date()
    const currentYear = now.getFullYear()
    const isFutureYear = entry.startYear > currentYear
    const isFutureMonth = entry.startYear === currentYear && entry.startMonth &&
      new Date(`${entry.startMonth} 1, ${entry.startYear}`).getTime() > now.getTime()

    if (isFutureYear || isFutureMonth) {
      return `Starting ${start}`
    }

    if (entry.expected) {
      return `${start} - Present (Expected)`
    }
    return `${start} - Present`
  })
</script>

<div class="relative pl-8">
  <!-- Timeline line -->
  <div class="absolute left-[7px] top-3 w-0.5 bg-border" class:-bottom-8={!isLast} class:bottom-0={isLast}></div>

  <!-- Timeline marker -->
  <div class="absolute left-0 top-1.5 size-4 rounded-full border-2 border-primary bg-background"></div>

  <!-- Content card -->
  <div class="timeline-card rounded-xl border bg-card p-5 transition-colors duration-300 hover:bg-secondary/30">
    <!-- Header row: school/degree left, date/location right -->
    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2 mb-4">
      <div>
        <h3 class="text-lg font-medium text-foreground">{entry.school}</h3>
        <div class="flex items-center gap-2 flex-wrap">
          <p class="text-sm text-muted-foreground">{entry.degree}</p>
          {#if entry.gpa}
            <span class="text-xs px-2 py-0.5 rounded-full bg-primary/10 text-primary font-medium">{entry.gpa} GPA</span>
          {/if}
        </div>
        {#if entry.minor}
          <p class="text-sm text-muted-foreground">Minor in {entry.minor}</p>
        {/if}
      </div>
      <div class="flex flex-col sm:items-end gap-0.5 text-sm text-muted-foreground shrink-0">
        <div class="flex items-center gap-1.5">
          <IconCalendar class="size-3" />
          <span class="font-medium">{dateDisplay()}</span>
        </div>
        {#if entry.location}
        <div class="flex items-center gap-1.5">
          <IconMapPin class="size-3" />
          <span class="text-sm">{entry.location}</span>
        </div>
        {/if}
      </div>
    </div>

    <!-- Courses and Awards grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-4">
      <!-- Courses (order-2 on mobile so awards appear first) -->
      {#if entry.courses && entry.courses.length > 0}
        <div class="flex flex-col gap-2 order-2 sm:order-1">
          <p class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Core Courses</p>
          <div class="flex flex-wrap gap-2">
            {#each entry.courses as course}
              <Badge variant="secondary" class="flex items-center gap-x-1">
                <IconHash class="size-3" />
                {course}
              </Badge>
            {/each}
          </div>
        </div>
      {/if}

      <!-- Awards (order-1 on mobile so it appears before courses) -->
      {#if entry.awards && entry.awards.length > 0}
        <div class="flex flex-col gap-2 order-1 sm:order-2">
          <p class="text-xs font-medium text-muted-foreground uppercase tracking-wide">Awards & Scholarships</p>
          <ul class="text-sm space-y-2">
            {#each entry.awards as award}
              <li class="flex items-start gap-2">
                <IconAward class="size-3 text-primary shrink-0 mt-1" />
                <div class="flex flex-col">
                  <span class="text-foreground font-medium">{award.name}</span>
                  {#if award.description}
                    <span class="text-xs text-muted-foreground">{award.description}</span>
                  {/if}
                </div>
              </li>
            {/each}
          </ul>
        </div>
      {/if}
    </div>
  </div>
</div>

<style>
  .timeline-card {
    position: relative;
    overflow: hidden;
  }

  .timeline-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(315deg, color-mix(in oklch, var(--color-primary) 6%, transparent) 0%, transparent 50%);
    pointer-events: none;
  }

  :global(.dark) .timeline-card::before {
    background: linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 6%, transparent) 0%, transparent 50%);
  }
</style>