defmodule CvGenView.Skill do
  use Phoenix.Component

  attr(:skill, :map)

  def skill(assigns) do
    ~H"""
    <h1><%= @skill.name %></h1>
    <ul class="keywords">
      <%= for kw <- @skill.keywords do %>
        <li><%= kw %></li>
      <% end %>
    </ul>
    """
  end

  def css(),
    do: """
    #skills ul.keywords {
      display: flex;
      flex-wrap: wrap;
      gap: 0.2em;
    }

    #skills .keywords > li {
      padding: 3px 7px;
      font-size: 0.7em;
      font-weight: 700;
      color: #fff;
      text-align: center;
      background-color: #333;
      border-radius: 0.5em;
    }

    @media print {
      #skills .keywords > li {
        color: #000;
        background-color: #fff;
        border: #000 solid 0.2em;
      }
    }
    """
end