import APIClient
import ComposableArchitecture
import Localization
import SwiftUI

public struct SongTitleField<FocusValue: Hashable>: View {
    @Binding var title: String
    let characterLimit: Int
    let placeholder: String
    var focusedField: FocusState<FocusValue?>.Binding?
    var focusValue: FocusValue?
    
    public init(
        title: Binding<String>,
        characterLimit: Int,
        placeholder: String = L10n.FeatureCreateClip.songTitle,
        focusedField: FocusState<FocusValue?>.Binding? = nil,
        focusValue: FocusValue? = nil
    ) {
        self._title = title
        self.characterLimit = characterLimit
        self.placeholder = placeholder
        self.focusedField = focusedField
        self.focusValue = focusValue
    }
    
    public var body: some View {
        HStack(spacing: 8) {
            Image.FigmaMCP.musicNote
                .figmaMCPIconStyle(size: 16, semanticColor: Color.FigmaMCP.Semantic.fogDense)
            
            CharacterLimitedTextField(
                placeholder: placeholder,
                text: $title,
                characterLimit: characterLimit
            )
            .figmaMCPTypography(TypographyV1.FigmaMCP.smallTitle)
            .foregroundStyle(title.isEmpty ? Color.FigmaMCP.Semantic.fogDense : Color.FigmaMCP.Semantic.foregroundPrimary)
            .modify { view in
                if let focusedField = focusedField, let focusValue = focusValue {
                    view.focused(focusedField, equals: focusValue)
                } else {
                    view
                }
            }
        }
        .padding(.horizontal, 16)
        .frame(height: 56)
        .background(Color.FigmaMCP.Semantic.fogThin)
        .clipShape(RoundedRectangle(cornerRadius: 16))
    }
}