'use client'

import { useState } from 'react'

type ServiceType = 'web-design' | 'ai-automation'

interface ServiceTypeToggleProps {
  defaultValue: ServiceType
  onChange: (value: ServiceType) => void
}

export function ServiceTypeToggle({ defaultValue, onChange }: ServiceTypeToggleProps) {
  const [value, setValue] = useState<ServiceType>(defaultValue)

  const handleChange = (newValue: ServiceType) => {
    setValue(newValue)
    onChange(newValue)
  }

  return (
    <div className="flex items-center justify-center mb-12">
      <div className="inline-flex bg-card border border-border rounded-lg p-1">
        <button
          onClick={() => handleChange('web-design')}
          className={`px-6 py-3 rounded-md text-sm font-bold transition-all ${
            value === 'web-design'
              ? 'bg-primary text-white shadow-lg'
              : 'text-muted-foreground hover:text-foreground'
          }`}
        >
          Web Design
        </button>
        <button
          onClick={() => handleChange('ai-automation')}
          className={`px-6 py-3 rounded-md text-sm font-bold transition-all ${
            value === 'ai-automation'
              ? 'bg-primary text-white shadow-lg'
              : 'text-muted-foreground hover:text-foreground'
          }`}
        >
          AI Automation
        </button>
      </div>
    </div>
  )
}