portfolio_nuxt/composables/useProjectDetail.ts

import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import { projects } from '~/config/projects';
import { DEFAULT_IMAGES } from '~/config/paths';
import { TEXTS } from '~/config/content';
import { PATHS } from '~/config/paths';

export const useProjectDetail = () => {
  const route = useRoute();
  const isLoading = ref(true);
  const error = ref<string | null>(null);

  const currentProject = computed(() => {
    const projectId = route.params.id as string;
    return projects.find(p => String(p.id) === projectId) || null;
  });

  const projectImage = computed(() => {
    if (!currentProject.value) return DEFAULT_IMAGES.PROJECT;
    return currentProject.value.image || DEFAULT_IMAGES.PROJECT;
  });

  const projectResources = computed(() => ({
    github: currentProject.value?.github ? {
      icon: PATHS.ICONS.GITHUB,
      label: TEXTS.PROJECTS.RESOURCES.GITHUB
    } : null,
    demo: currentProject.value?.demo ? {
      icon: PATHS.ICONS.DEMO,
      label: TEXTS.PROJECTS.RESOURCES.DEMO
    } : null,
    documentation: currentProject.value?.documentation ? {
      icon: PATHS.ICONS.DOCUMENTATION,
      label: TEXTS.PROJECTS.RESOURCES.DOCUMENTATION
    } : null,
    youtube: currentProject.value?.youtube ? {
      icon: PATHS.ICONS.YOUTUBE,
      label: TEXTS.PROJECTS.RESOURCES.YOUTUBE
    } : null
  }));

  const handleImageError = (event: Event) => {
    const target = event.target as HTMLImageElement;
    target.src = DEFAULT_IMAGES.PROJECT;
    error.value = TEXTS.COMMON.ERROR.IMAGE_LOAD;
  };

  const handleIconError = (event: Event) => {
    const target = event.target as HTMLImageElement;
    target.src = DEFAULT_IMAGES.ICON;
    error.value = TEXTS.COMMON.ERROR.ICON_LOAD;
  };

  setTimeout(() => {
    isLoading.value = false;
  }, 500);

  return {
    currentProject,
    projectImage,
    projectResources,
    isLoading,
    error,
    handleImageError,
    handleIconError
  };
};