defmodule CvGenView.Education do
  use Phoenix.Component
  alias CvGenView.Date

  attr(:institution, :string, required: true)
  attr(:location, :string, required: true)
  attr(:start_date, :string, required: true)
  attr(:end_date, :string, required: true)
  attr(:summary, :string, required: true)

  def education(assigns) do
    ~H"""
    <div class="education">
      <Date.time_span start_date={@start_date} end_date={@end_date} />
      <div class="box">
        <h1><%= @institution %></h1>
        <h2><%= @area %></h2>
        <p><%= @summary %></p>
      </div>
    </div>
    """
  end

  # TODO: Almost the same as in Work heading, but not quite.
  def css(),
    do: """
    .education h1,
    .education h2,
    .education p {
      margin: 0;
    }

    .box {
      display: flex;
      flex-direction: column;
      gap: 0.5em;

      background-color: #eee;
      padding: 0.5em;

      margin-bottom: 1em;
    }

    .box > h1 {
      font-weight: bold;
    }

    .box > h2 {
      font-weight: normal;
      padding-left: 0.5em;
    }

    .box > p {
      font-weight: lighter;
      padding-left: 0.5em;
    }
    """
end