export type PhoneNumber = {
	number: string;
	type: "home" | "work" | "mobile" | "fax" | "other";
	label?: string;
};

export type EmailAddress = {
	address: string;
	type: "home" | "work" | "personal" | "other";
	label?: string;
};

export type Address = {
	street?: string;
	city?: string;
	state?: string;
	postalCode?: string;
	country?: string;
	type: "home" | "work" | "billing" | "shipping" | "other";
	label?: string;
};

export type SocialMedia = {
	platform: "linkedin" | "twitter" | "facebook" | "instagram" | "github" | "youtube" | "tiktok" | "signal" | "whatsapp" | "telegram" | "other";
	url: string;
	username?: string;
};

export type ContactData = {
	// Personal Information
	firstName?: string;
	lastName?: string;
	fullName?: string;
	title?: string;
	// Contact Information
	emails?: EmailAddress[];
	phones?: PhoneNumber[];
	website?: string;
	// Address Information
	addresses?: Address[];
	// Company Information
	company?: string;
	department?: string;
	jobTitle?: string;
	// Additional Information
	notes?: string;
	avatar?: string;
	// Location
	latitude?: number;
	longitude?: number;
	// Social Media
	socialMedia?: SocialMedia[];
	// Actions

	clickable?: boolean;
};
interface IDropDownMenuListItem {
	key: string;
	label: string;
	badge?: number;
	group?: string;
	linkHref?: string;
}
export type Component = {
	id?: string;
	style?: string;
	data: ContactData;
	actions_list?: IDropDownMenuListItem[];
	i18nlang?: string;
	show_header_collapse_button?: "yes" | "no"; // show/hide header collapse button; default "yes"
	start_collapsed?: "yes" | "no"; // start with body collapsed; default "no"

};

export type Events = {
	contactClick: { id: string; contact: ContactData };
	contactEdit: { id: string; contact: ContactData };
	contactDelete: { id: string; contact: ContactData };
	phoneClick: { id: string; phone: PhoneNumber };
	emailClick: { id: string; email: EmailAddress };
	websiteClick: { id: string; website: string };
	socialClick: { id: string; social: SocialMedia };
	addressClick: { id: string; address: Address };
	collapseChange: { id: string; collapsed: boolean };
};