defmodule FeenixUiWeb.Components.ColorPickerComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :value, fn -> "#3b82f6" end)
    assigns = assign_new(assigns, :preset_colors, fn -> ["#ef4444", "#f59e0b", "#22c55e", "#3b82f6", "#8b5cf6", "#ec4899"] end)

    ~H"""
    <div class="space-y-3">
      <div class="flex items-center space-x-3">
        <div class="w-10 h-10 rounded-lg border-2 border-gray-300 overflow-hidden">
          <div class="w-full h-full" style={"background-color: #{@value}"}></div>
        </div>
        <input
          type="color"
          value={@value}
          class="w-12 h-10 border border-gray-300 rounded-md cursor-pointer"
        />
      </div>
      <div class="flex flex-wrap gap-2">
        <%= for color <- @preset_colors do %>
          <button
            class="w-8 h-8 rounded-full border-2 border-gray-300 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-500"
            style={"background-color: #{color}"}
            title={color}
          ></button>
        <% end %>
      </div>
    </div>
    """
  end
end