'use client';

import { CompanySettings } from '../page';

interface SocialSettingsProps {
  settings: CompanySettings;
  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
}

export default function SocialSettings({ settings, setSettings }: SocialSettingsProps) {
  return (
    <div className="p-6 space-y-6">
      <h3 className="text-lg font-semibold text-slate-800">Social Media Links</h3>

      <div className="space-y-4">
        <div className="flex items-center gap-3">
          <span className="w-5 text-blue-600 font-bold text-sm">FB</span>
          <label className="w-24 text-sm text-slate-600">Facebook</label>
          <input
            type="text"
            value={settings.socialLinks.facebook}
            onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, facebook: e.target.value } })}
            className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
            placeholder="https://facebook.com/yourpage"
          />
        </div>
        <div className="flex items-center gap-3">
          <span className="w-5 text-sky-500 font-bold text-sm">X</span>
          <label className="w-24 text-sm text-slate-600">Twitter</label>
          <input
            type="text"
            value={settings.socialLinks.twitter}
            onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, twitter: e.target.value } })}
            className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
            placeholder="https://twitter.com/yourpage"
          />
        </div>
        <div className="flex items-center gap-3">
          <span className="w-5 text-pink-600 font-bold text-sm">IG</span>
          <label className="w-24 text-sm text-slate-600">Instagram</label>
          <input
            type="text"
            value={settings.socialLinks.instagram}
            onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, instagram: e.target.value } })}
            className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
            placeholder="https://instagram.com/yourpage"
          />
        </div>
        <div className="flex items-center gap-3">
          <span className="w-5 text-blue-700 font-bold text-sm">IN</span>
          <label className="w-24 text-sm text-slate-600">LinkedIn</label>
          <input
            type="text"
            value={settings.socialLinks.linkedin}
            onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, linkedin: e.target.value } })}
            className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
            placeholder="https://linkedin.com/company/yourpage"
          />
        </div>
        <div className="flex items-center gap-3">
          <span className="w-5 text-red-600 font-bold text-sm">YT</span>
          <label className="w-24 text-sm text-slate-600">YouTube</label>
          <input
            type="text"
            value={settings.socialLinks.youtube}
            onChange={(e) => setSettings({ ...settings, socialLinks: { ...settings.socialLinks, youtube: e.target.value } })}
            className="flex-1 px-3 py-2 border border-slate-200 rounded-lg text-sm"
            placeholder="https://youtube.com/@yourchannel"
          />
        </div>
      </div>
    </div>
  );
}
